为什么这个相对定位的元素渲染在其父元素下面？

Question

JSFiddle.

在此SSCCE中，第一个div.number-outer-container呈现在其父div.step-container之下。

问题是，为什么会发生这种情况，我该怎么做才能让它在正确的位置垂直渲染？

我尝试将top:0应用于div.number-outer-container，但似乎没有任何影响。

注意： 这只是一个SSCCE，实际上每个div.step-container都是动态添加的，任意数量的div.step-container都可以添加。

.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

由于div.notch-outer-container和div.content-box，占用了所有空间。因为所有的div都是inline-block。

如果您在position:absolute; top:0;上设置div.number-outer-container并删除position:relative，那么它就会上升。

<强> http://jsfiddle.net/7dte3ru6/5/

Answer 2

您可以将position:relative设置为父容器，并在子元素上设置position:absolute，这样它们将始终保持在一起。

如果您有兴趣详细了解position如何运作的详细信息，请阅读 post 。

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