CSS: Place a div-Container inside a div-Container

Question

I want to set a div container inside another div-container. The info-Container should be placeable like where i want it (for example: float:right;) and another should be inside it.

But in my case it places the containers among themselves and not inside it.

Here my HTML-Code:

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

And my CSS-Code:

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

Thanks in advance!

Answer 1

从第二个div CSS中删除绝对位置，然后尝试

Answer 2

The second div should not have absolute positioning. An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling

If you want to use absolute positioning on second div you have to set first div to position relative.

Check codepen for the example: https://codepen.io/athapliyal/pen/aGYMvP

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

Answer 3

i hope work so:

 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>