Question

关于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元素视为相同，能够使用{{ 1}} / top / left / right来控制对父母的抵消金额？

Answer 1

我认为position:static以外的任何内容都会为已定位的子项设置新的父上下文。

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

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

因此设置position:fixed会导致绝对子元素跟随新上下文。

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

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

绝对定位的一个基本概念是包含块：绝对定位的盒子的位置和尺寸相对于的块盒。对于静态框和相对定位的框，包含块是最近的块级祖先 - 换句话说是父元素。对于绝对定位的元素，但它有点复杂。在这种情况下，包含块是最近的祖先。 “定位”是指一个元素，其position属性设置为相对，绝对或固定 - 换句话说，除了正常的静态元素之外的任何东西。

资料来源： MDN Positon，w3org absolute position

CSS定位：关于绝对的固定和相对可互换？

1 个答案: