CSS：將div容器放入div容器中

Question

我想在另一個div容器中設置一個div容器。 信息容器應該像我想要的地方一樣可放置（例如：float：right;），並且另一個應該位於其中。

但就我而言，它將容器放置在彼此之間而不是內部。

這是我的HTML代碼：

<div class="info">
    s
    <div class="info-header">
    ss
    </div>
</div>

而我的CSS代碼：

div.info {
    position: absolute;
    background: yellow;
}
div.info-header {
    position: absolute;
    background: green;
}

提前致謝！

Answer 1

從第二個div CSS中刪除絕對位置，然后嘗試

Answer 2

第二個div不應具有絕對位置。 位置為：絕對的元素； 相對於最近定位的祖先定位（而不是相對於視口定位，如固定）。

然而; 如果絕對定位的元素沒有祖先，它將使用文檔主體，並隨頁面滾動一起移動

如果要在第二個div上使用絕對定位，則必須將第一個div設置為相對位置。

檢查codepen中的示例： https ://codepen.io/athapliyal/pen/aGYMvP

div.info {
    position: relative;
    background: yellow;
    padding: 20px;
}
div.info-header {
    position: absolute;
    background: green;
}

Answer 3

我希望這樣工作：

 body { padding: 20px; background-color: #20262e; } div.info { position: absolute; background: #ffdd57; border-radius: 3px; padding: 20px; right: 0; /* if left comment hier */ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-gap: 10px; } div.info-header { position: relativ; background: #05ffb0; border-radius: 3px; padding: 20px; font-size: 14px; } 

 <div class="info"> s <div class="info-header"> ss </div> </div>