CSS偏移属性和静态位置

Question

偏移属性(左、上、下、右)是否仅适用于非静态位置？

它们可以应用于静态定位的元素吗？如果是这样，与 将它们应用于非静态定位的元素？

Answer 1

要偏移一个元素，它的位置必须是position:relative

坐标、top、right、bottom 和 left 根据是否元素相对或绝对定位。

元素什么时候是偏移而不是移动？

当您实际使用 position: relative; 进行偏移时，元素并没有从流中移除，实际上，如果元素保持静态(默认)，该元素将占用的空间仍然是为它保留，因此你只是将它从它的原始位置偏移了。它后面的任何元素都会出现在它应该完成的位置，即使你没有抵消它的前身 - 就像这样 example

移动，而不是偏移

但是如果你真的想移动一个元素，那么它需要从流中移除，所以没有为它保留空间，这就是你使用 position:absolute; 或固定..这就是区别

总结

• static 是默认值，您只需使用边距来移动它，它会忽略坐标和 z-index

• relative 是预留空间，坐标会从原来的空间偏移

• absolute 将从流中删除元素，坐标将根据它的 containing block 计算，这是最近的相对定位的祖先(如果不存在相对定位的祖先，则为 body 元素)

• fixed 没有包含 block ，即您无法指定它应该相对于哪个元素定位，它只会相对于视口(viewport)修复自身

最后，如果元素的位置默认为静态，则元素不会接受 z-index，因此 position: relative; 没有应用任何坐标是 < em>类似于 static，但它对于 z 索引和作为绝对定位元素的包含 block 很有用