Why does this relatively positioned element render below its parent? - html

Question

JSFiddle.
In this SSCCE, the first div.number-outer-container renders below its parent div.step-container.
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 -->

Answer 1

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*/
}

Answer 2

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/