Why does this relatively positioned element render below its parent?

Question

In this SSCCE, the first div.number-outer-container renders below its parent div.step-container.

enter image description here

The question is that why is this happening, and what can I do to make it render vertically at the right place?

I have tried to apply a top:0 to div.number-outer-container but it does not seem to affect anything.

Note: This is just an SSCCE, actually each div.step-container is added dynamically, and any number of div.step-containers can be added.

.wrapper-big {
  height: 600px;
  overflow-y: auto;
  width: 100%;
}
.wrapper {
  height: 100%;
  width: 826px;
  margin: 50px auto;
  display: table;
  background-color: #003b80;
}
.cell {
  display: table-cell;
  vertical-align: top;
}
.left-cell {
  width: 50%;
  background-color: chocolate;
}
.right-cell {
  background-color: darkslategrey
}
.step-container {
  max-height: 200px;
  font-size: 0;
}
.right-cell .step-container {
  margin-top: 125px;
  direction: rtl;
}
.content-box {
  display: inline-block;
  width: 350px;
  height: 200px;
  /*border: 5px solid blue;*/
  font-size: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
  background-color: dodgerblue
}
.right-cell .content-box {
  background-color: darkturquoise
}
.middle-cell {
  height: 100%;
  background-color: white;
  width: 1.5px;
  font-size: 0;
  box-shadow: 0px 0px 10px black;
  -moz-box-shadow: 0px 0px 10px black;
  -webkit-box-shadow: 0px 0px 10px black;
}
.number-outer-container {
  display: inline-block;
  /*position:absolute;*/
  position: relative;
  left: 390px;
}
.left-cell .number-outer-container {
  /*margin-left:39px;*/
}
.left-cell .number-outer-container {
  left:390px;
}
.right-cell .number-outer-container {
  right:390px;
}
.number-inner-container {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.number-banner {
  width: 50px;
  height: 50px;
  background-color: crimson;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  font-size:22px;
  font-weight:bold;
  color:white;
  line-height:50px;
  text-align:center;
}
.notch-outer-container {
  display: inline-block;
}
.left-cell .notch-outer-container {
  /*margin-right: 24px;*/
}
.right-cell .notch-outer-container {
  /*margin-left: 22px;*/
}
.notch-inner-container {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.notch {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.left-face-notch {
  border-right: 15px solid #520f23;
}
.right-face-notch {
  border-left: 15px solid #571780;
}

<div class="wrapper-big">

  <div class="wrapper">


    <div class="cell left-cell" align="left">
      <!-- -->
      <div class="step-container">
        <div class="content-box"></div>



        <div class="notch-outer-container">
          <div class="notch-inner-container">
            <div class="right-face-notch notch"></div>
          </div>
        </div>



        <div class="number-outer-container">
          <div class="number-inner-container">
            <div class="number-banner">1</div>
          </div>
        </div>

      </div>

      <!-- -->

      <div class="step-container" style="margin-top:50px;">
        <div class="content-box"></div>



        <div class="notch-outer-container">
          <div class="notch-inner-container">
            <div class="right-face-notch notch"></div>
          </div>
        </div>



        <div class="number-outer-container">
          <div class="number-inner-container">
            <div class="number-banner">3</div>
          </div>
        </div>

      </div>

      <!-- -->

      <div class="step-container" style="margin-top:50px;">
        <div class="content-box"></div>



        <div class="notch-outer-container">
          <div class="notch-inner-container">
            <div class="right-face-notch notch"></div>
          </div>
        </div>



        <div class="number-outer-container">
          <div class="number-inner-container">
            <div class="number-banner">5</div>
          </div>
        </div>

      </div>
      <!-- -->
    </div>



    <div class="cell middle-cell"></div>



    <div class="cell right-cell" align="right">
      <!-- -->
      <div class="step-container" style="margin-top:125px;">

        <div class="content-box"></div>



        <div class="notch-outer-container">
          <div class="notch-inner-container">
            <div class="left-face-notch notch"></div>
          </div>
        </div>



        <div class="number-outer-container">
          <div class="number-inner-container">
            <div class="number-banner">2</div>
          </div>
        </div>

      </div>

      <!-- -->

      <div class="step-container" style="margin-top:50px;">

        <div class="content-box"></div>



        <div class="notch-outer-container">
          <div class="notch-inner-container">
            <div class="left-face-notch notch"></div>
          </div>
        </div>



        <div class="number-outer-container">
          <div class="number-inner-container">
            <div class="number-banner">4</div>
          </div>
        </div>

      </div>

      <!-- -->

      <div class="step-container" style="margin-top:50px;">

        <div class="content-box"></div>



        <div class="notch-outer-container">
          <div class="notch-inner-container">
            <div class="left-face-notch notch"></div>
          </div>
        </div>



        <div class="number-outer-container">
          <div class="number-inner-container">
            <div class="number-banner"></div>
          </div>
        </div>

      </div>

      <!-- -->
    </div>


  </div>
  <!-- .wrapper -->

</div>
<!-- .wrapper-big -->

score 1 · Answer 1 · answered Jul 02 '15 at 17:33

1

Because of div.notch-outer-container and div.content-box, are taking up all the space. And since all the divs are inline-block.

If you set position:absolute; top:0; on div.number-outer-container and remove position:relative then it goes up.

http://jsfiddle.net/7dte3ru6/5/

answered Jul 02 '15 at 17:33

Muhammad Umer

17,263
19
97
168

I was earlier using `position:absolute` on `.number-outer-container`, but then the div was scrolling with the scrolling of the page, and was not staying where it was, [here is the fiddle](http://jsfiddle.net/1abv3gru/). In your fiddle, it is still below its parent. Still +1 for answering the question. – Solace Jul 02 '15 at 17:39
About " div.notch-outer-container and div.content-box, are taking up all the space.", I am sorry I had posted a code before an update I had made in which I removed the margin from the `.notch-outer-container`, then I edited the question, now the code in the question is updated. – Solace Jul 02 '15 at 17:40
1

put this `position:relative` on `div.step-container`. Absolutely positioned elements use closest parent with position relative as a reference. – Muhammad Umer Jul 02 '15 at 17:49
1

Thank you so very much, especially for including the reason in your answer "Absolutely positioned elements use closest parent with position relative as a reference." The abover answerer had already solved it, and I had already requested them to post it as answer so I could accept it, otherwise I would definitely accept this answer. Thank you very much. – Solace Jul 02 '15 at 17:56

score 1 · Accepted Answer · edited May 23 '17 at 10:26

You could set position:relative to the parent container, and set position:absolute on the child element, so they will always stay together.

Read this post if you're interested in learning more about the details of how position works.

UPDATED DEMO

.cell .step-container {
    position: relative;
}
.cell .number-outer-container {
    position: absolute;
    top: 0;
}
.left-cell .number-outer-container {
    left: 390px;
}
.right-cell .number-outer-container {
    left: -20px;
}
.left-face-notch,
.right-face-notch {
    position: absolute;
    top: 85px; /*200/2 - 30/2*/
}

Why does this relatively positioned element render below its parent?

2 Answers2