html - 绝对元素不相对于其容器定位

Question

我在“相关”容器中有两个元素。

问题是“绝对”元素应该相对于容器定位，但它是相对于第二个“静态”元素定位的。

例子:

       <div style="position:relative">
           <button style="position:absolute;top: 200px">Botton</button>
           <div style="margin-top: 500px">hi</div>
       </div>

div(带有“hi”文本)应位于按钮下方，但不知何故按钮位于“hi”div 下方 200px。

注意:如果我向容器添加边框，它将按预期运行。

有边界和无边界的区别示例:JSfiddle

Answer 1

它按预期工作，因为一个使用 position:absolute 另一个使用 margin-top，第二个不会使用 margin -top 给兄弟，因为兄弟不在流程中(使用 position:absolute)

所以不要使用 margin-top，而是使用 position:absolute，或者对两个 child 都使用 margin-top。

位置

div {
  position: relative
}
div > * {
  position: absolute
}
button {
  top: 200px
}
span {
  top: 300px
}

<div>
  <button>Botton</button>
  <span>hi</span>
</div>

边距

button {
  margin-top: 200px
}
span {
  margin-top: 300px;
  display: block
}

<div>
  <button>Botton</button>
  <span>hi</span>
</div>