CSS：将div-Container放在div-Container中

Question

我想在另一个div容器中设置一个div容器。 info-Container应该像我想要的那样放置（例如：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;
}