静态定位元素会影响后续相邻的绝对定位元素。

Question

我知道，任何具有position:absolute属性的元素都将相对于最近的祖先元素定位，该祖先元素具有诸如absolute或relative等定位属性。这在各种答案中都有提到，例如这里。同时，在w3schools网站上也有介绍，这里...

使用position: absolute;属性的元素相对于最近的已定位祖先（而不是相对于视口，如fixed）进行定位。

然而，插入静态元素似乎会打破这个规则并移动绝对定位的元素。我想了解为什么会发生这种情况。请参见下面的代码片段。

如果将静态元素更改为绝对定位，则后续元素将按照最近的定位祖先规则正常显示。

div.relative {
    position: relative;
    width: 440px;
    height: 600px;
    border: 3px solid #73AD21;
} 
div.static {
position: static;
    width: 200px;
    height: 100px;
    border: 3px solid #73ADff;
}
div.absolute {
    position: absolute;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
div.absolute2 {
  left:210px;
    position: absolute;
    width: 200px;
    height: 100px;
    border: 3px solid #ffAD21;
}

<div class="relative">This div element has position: relative;
   <div class="static">This div element has position: static</div>
  <div class="absolute">This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;</div>
    <div class="absolute2">This div element also has position: absolute;</div>

</div>

- NickJI

---

我认为如果不指定定位属性（top，right，bottom，left），那么绝对定位的元素将显示在原位置上，就像是相对或静态元素一样。 - Andrew Novikov

Answer 1

如这个答案所解释的那样，如果没有(top, left, right, bottom)属性，position: absolute元素将默认定位为正常流的一部分，如果你想保持一个position: absolute元素与其兄弟元素（如工具提示）的位置关系，并使用margin属性进行操作，则这很有帮助。

margin-top:-40px;
margin-left:30px;

但是如果您设置了任何一个（top，left，right，bottom），这将重置默认位置，并相对于父元素。

top:0

- Renzo Calla

---

谢谢Renzo，现在都很清楚了。确实不清楚带有自动偏移量的绝对定位会采用正常流位置。感谢您的帮助。 - NickJI

Answer 2

当W3Schools（以及CSS规范）说一个元素是“相对于”某个东西定位时，它从来没有指的是该元素的兄弟元素。它指的是该元素的包含块。

非定位元素（position: static）影响后续具有自动偏移的绝对定位元素布局的原因是因为具有自动偏移的绝对定位元素会假定其静态位置（参见this answer以及this one RenzoCC链接），而一个元素的静态位置本质上受周围元素的布局影响，特别是前面的兄弟元素。

不改变任何偏移量的情况下绝对定位一个元素所做的就是导致跟随它的元素的布局好像该元素不存在一样。这就是将元素从流中取出的意思。

- BoltClock

---

相对定位和流动概念已经理解。我的问题与绝对元素相对于前面的兄弟元素的定位有关，与“具有position: absolute;属性的元素相对于最近的定位祖先定位”（这是广泛重复的）形成对比。在我看来，这个说法是误导性的，因为具有自动偏移量的绝对位置的位置是计算出的静态位置，它考虑了前面的兄弟元素，正如您（和RenzoCC）提供的参考所指出的那样。提供的信息解决了我的问题，所以谢谢。 - NickJI

@NickJI：是的，“相对”的使用可能有点令人困惑。但是一旦你理解了它的含义（我在第一段已经解释过了），其他一切都会变得清晰明了。 - BoltClock

我理解相对定位的意思 - 但这并不是完整的故事，因为绝对定位元素的位置部分由前面的兄弟元素决定，这就是不清楚的地方。 - NickJI

Answer 3

静态位置对于祖先位置“position: relative”不存在影响绝对位置的影响。

但是，“position: absolute”有能力在“position: relative”内任意定位自己（请参见我制作的附加代码），而“position: static”无法使用Top、Right、Bottom和Left，因为它是一个默认位置，只位于左侧。

div.relative {
    position: relative;
    width: 440px;
    height: 600px;
    border: 3px solid #73AD21;
} 
div.static {
    position: static;
    width: 200px;
    height: 100px;
    border: 3px solid #73ADff;
}
div.absolute {
    position: absolute;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
    /* Absolute Location inside the Relative Position */
    top: 0;
    left: 0;
}
div.absolute2 {
    left:210px;
    position: absolute;
    width: 200px;
    height: 100px;
    border: 3px solid #ffAD21;
    /* Absolute Location inside the Relative Position */
    top: 0;
}

<div class="relative">This div element has position: relative;
  <div class="static">This div element has position: static</div>
  <div class="absolute">This div element has position: absolute, but is positioned relative to the preceding static element, not the first positional ancestor.;</div>
  <div class="absolute2">This div element also has position: absolute;</div>
</div> <!-- / .relative -->

- louierosero

---

感谢您抽出时间回答我的问题。我的问题实际上是为什么静态元素会影响绝对定位元素的位置，这个问题在其他答案中已经得到了解决。 - NickJI