positioniere ein Kind <div> in einem fest positionierten Elternteil <div> - html, css

Also versuche ich ein modales Fenster zu erstellen (mit einemweißen Hintergrund) mit HTML / CSS und ich möchte, dass das modale Fenster selbst relativ zum Browserfenster positioniert wird. Darüber hinaus enthält das Modal oben ein untergeordnetes img und unten ein untergeordnetes div, das einen Beschreibungstext enthält. Mein Zweck ist es, das untergeordnete div relativ zum übergeordneten festen modalen Fenster zu positionieren, so dass das untergeordnete div einen linken Versatz von etwa 8,33% der Breite des übergeordneten Elements hat.

Anfangs dachte ich, ich sollte das Kind div absolut positionieren, aber wenn ich das tue, reicht der Hintergrund der übergeordneten Modalfenster nicht bis zum Kind div:

Hier ist die HTML / CSS für das oben: html:

<div class="modal col-4 l-offset-4" id="robot-modal">
<img src="/images/media/robot_modal.jpg">
<div class="col-10 l-offset-1">
</div>
</div>

CSS:

.col-10 {
width: 83.33333%;
}

.l-offset-1 {
left: 8.33333%;
}
.modal {
@include align-vertically(fixed);
display: none;
z-index: 2000;
background: white;
img {
width: 100%;
}
div{
position: absolute;
background-color: blue;
height: 100px;
}
}

Wenn ich jedoch die Position des untergeordneten div auf "relativ" ändere, wird der korrekte Hintergrund angezeigt:

Ich verstehe nicht die Intuition, warum ich immer sollteRelative Position eines Elements innerhalb eines festen übergeordneten Elements. Würde ein Element nicht als relativ positioniert, wäre es nicht möglich, den Versatz relativ zum übergeordneten Element anzupassen. http://www.webdevdoor.com/html-css/css-position-child-div-parent , wenn wir ein Element relativ zu positionieren wollenBei seinem unmittelbaren übergeordneten Element sollte das übergeordnete Element absolut oder relativ positioniert sein und das untergeordnete Element muss absolut positioniert sein. Warum funktioniert in meinem Fall auch die Einstellung des Versatzes eines relativ positionierten Kindes? Ich möchte dem übergeordneten Modal keine Höhe zuweisen. Ich möchte, dass er sich automatisch vergrößert, wenn neue Elemente darin enthalten sind.

Antworten:

Ein Elternteil berücksichtigt die Größe des absoluten Kindes nicht. Gemäß MDN:

Absolut: Lassen Sie keinen Platz für das Element. Positionieren Sie ihn stattdessen an einer bestimmten Position relativ zu seinem nächstgelegenen Vorfahren oder zum enthaltenden Block

Wenn Sie etwas hinter dem absoluten Element setzen, wird es oben angezeigt, da das absolute Element nicht mehr im Dokumentenfluss enthalten ist.

Du kannst tun position: relative; left: 8.33%; right: 8.33%oder lassen Sie es einfach mit statisch margin: 0 8.33%;oder wenn Sie absolut tun, können Sie einstellen .modal { margin-bottom: [height of absolute DIV] }, wenn die Höhe eingestellt ist und sich nicht ändert.