为什么这个相对定位的元素呈现在其父元素下方？

Question

在此 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，都占满了space。而且由于所有的 div 都是 inline-block.

如果您在 div.number-outer-container 上设置 position:absolute; top:0; 并删除 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*/
}

为什么这个相对定位的元素呈现在其父元素下方？

Why does this relatively positioned element render below its parent?

html

css

css-position