position a child <div> inside a fixed positioned parent <div>

Question

So I'm trying to build a modal window (with a white background) with HTML/CSS and I want the modal window itself to be fixed positioned relative to the browser window. In addition, the modal contains a child img at the top and a child div at the bottom that will contain some description text in it. My purpose is to position the child div relative to the parent fixed modal window so that the child div has a left offset of about 8.33% of the width of the parent.

So initially I thought I should absolute position the child div, but once I do that the background of the parent modal windows does not extend to the child div:

here is the html/css for the above: html:

<div class="modal col-4 l-offset-4" id="robot-modal">
    <img src="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;
  }
}

But when I change the child div's position to 'relative', then the correct background will show up:

I don't get the intuition why I should always relative position an element inside a fixed parent. Wouldn't positioning an element as relative make it impossible to adjust offset relative to its parent ? According to this article: http://www.webdevdoor.com/html-css/css-position-child-div-parent , if we want to position an element relative to its immediate parent, the parent better be absolute or relative positioned and the child must be absolute positioned. So in my case why does adjusting the offset of a relative positioned child also work? I don't want to assign a height to the parent modal. i want it to automatically enlarge itself when new elements are contained in it.

Don't position it Absolutely - or the parent won't have any idea what the dimensions of the image are since you pull it out of the normal DOM flow. Position the image relative to the parent. position:relative; margin:0 8.33%; — Korgrue
absolute references the element's parent or closest positioned element ancestor. relative references it's own original position and when moved the element appears to move but in reality, the element is still where it was originally the move being presentational instead. The usual way of doing position is to use a relative as the parent and use an absolute child . — zer00ne

bradlis7 bradlis7 · Accepted Answer · 2016-02-10T22:42:34

A parent does not take into account the size of the absolute child. According to MDN:

Absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block

If you put something after the absolute element, it goes on top, because the absolute element is no longer in the document flow.

You can do position: relative; left: 8.33%; right: 8.33%, or just leave it as static with margin: 0 8.33%;, or if you do absolute, you can set .modal { margin-bottom: [height of absolute DIV] }, if the height is set and won't change.

position a child <div> inside a fixed positioned parent <div>

1 Answers