css - CSS定位:关于绝对，固定和相对可互换？

关于absolute定位，fixed看起来像relative。

.fixed, .relative {
  border: 1px solid;
  width: 150px;
  height: 150px;
}

.fixed {
  border-color: red;
  position: fixed;
}

.relative {
  border-color: blue;
  margin-left: 200px;
  position: relative;
}

.absolute {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

.a {
  top: 0;
  left: 0;
}

.b {
  bottom: 0;
  right: 0;
}

<div class="fixed">
  <span class="absolute a">Left Top</span>
  <span class="absolute b">Right Bottom</span>
</div>

<div class="relative">
  <span class="absolute a">Left Top</span>
  <span class="absolute b">Right Bottom</span>
</div>

不幸的是，我不明白为什么。我希望可以在某个地方定义它，但是我只能找到讨论absolute和relative的资源，而不是absolute和fixed的资源。

这引出了一个问题：就absolute位置而言，我真的可以将fixed和relative元素视为相同，并且能够使用top / left / right / bottom控制到父级的偏移量？

最佳答案

我认为，除了position:static以外，其他任何东西都为定位的孩子设置了新的父级上下文。

可以在MDN文档中为绝对定位进行验证


  绝对定位的元素相对于其最近定位的祖先（即，不是静态的最近祖先）定位。


因此设置position:fixed确实会使绝对子元素遵循新上下文。

可以在fiddle here中看到。更改position div的.rel会移动红色div的集合，但是绝对定位的蓝色div会随之移动。

另一个好的来源是w3.org，其中说


  涉及绝对定位的一个基本概念是包含块：绝对定位盒的位置和尺寸相对于其的块盒。对于静态框和相对定位的框，包含的块是最接近的块级祖先，即父元素。但是，对于绝对定位的元素而言，要复杂一些。在这种情况下，包含块是最接近的祖先。 “定位”是指其位置属性设置为相对，绝对或固定的元素，换句话说，除普通静态元素外的任何元素。


资料来源：
MDN Positon，w3org absolute position

关于css - CSS定位:关于绝对，固定和相对可互换？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47257964/