CSS偏移属性和静态位置

前端之家收集整理的这篇文章主要介绍了CSS偏移属性和静态位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
偏移属性(左,上,下,右)仅适用于非静态位置吗?

它们可以应用于静态定位的元素吗?如果是这样,有什么区别
将它们应用于非静态定位元素?

解决方法

要偏移一个元素,它的位置必须是位置:相对

坐标,顶部,右侧,底部和左侧用于不同的目的,取决于元素是相对还是绝对定位.

什么是元素偏移而不是移动?

当你实际使用position:relative;该元素不会从流中移除,实际上,如果元素保持静态(默认值),则该元素将占用的空间仍为其保留,因此您只需将其从原始位置偏移即可.它后面的任何元素都会出现在它可能已经完成的位置,即使你没有抵消它的前身 – 就像这个example

移动,而不是抵消

但是,如果你真的想要移动一个元素,那么它需要从流中删除,所以没有为它保留空间,然后当你使用position:absolute时;或固定..这是差异

摘要

> static是默认值,你只需使用边距移动它,它将忽略坐标和z-index
> relative是保留空间,坐标将偏离它的原始空间
>绝对将从流中移除元素,坐标将根据它的containing block计算,这是最近的相对位置的祖先(或者如果没有相对定位的祖先存在的身体元素)
> fixed没有包含块,即你不能指定它应该相对于哪个元素定位,它只是相对于视口固定自己

最后一个元素不接受z-index如果它的位置是static的默认值,那么position:relative;没有任何坐标应用类似于静态,但它对z索引很有用,并且是绝对定位元素的包含块

猜你在找的CSS相关文章