Question

我在“亲戚”中有两件物品。容器

问题在于绝对的＆＃39; item应相对于容器定位，但它相对于第二个“静态”位置。项目

示例：

＆＃13;

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

＆＃13;

div（带有＆＃39; hi＆＃39;文本）应位于按钮下方，但不知何故，按钮位于＆＃39; hi＆＃39;以下200px处。格。

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

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

Answer 1

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

Answer 2

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

所以代替margin-top使用position:absolute，或者对两个孩子使用margin-top。

`position`

＆＃13;

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

＆＃13;

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

＆＃13;

`margin`

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案:

`position`

`margin`