绝对项目不相对于其容器定位

Question

我在 'relative' 容器中有两件物品。

问题是 'absolute' 项目应该相对于容器定位，但它相对于第二个 'static' 项目定位。

示例：

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

div（带有 'hi' 文本）应该位于按钮下方，但不知何故按钮位于 'hi' div.[=12= 下方 200px ]

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

有边框和没有边框的区别示例：JSfiddle

Answer 1

也许如果您从 <button style="position:absolute; top: 200px>Botton</button> 中删除 200px？

Answer 2

它按预期工作，因为一个正在使用 position:absolute 另一个正在使用 margin-top，第二个不会对兄弟姐妹做 margin-top 因为兄弟姐妹是流出（使用position:absolute）

所以不要 margin-top 使用 position:absolute，或者在两个 children.

上使用 margin-top

`position`

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

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

`margin`

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

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

绝对项目不相对于其容器定位

Absolute item is not located relative to its container

html

css

absolute

`position`

`margin`