css – 静态和相对定位之间的差异

前端之家收集整理的这篇文章主要介绍了css – 静态和相对定位之间的差异前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在CSS中,静态(默认)定位和相对定位之间有什么区别?

解决方法

静态定位是元素的默认定位模型。它们显示在作为正常HTML流的一部分呈现的页面中。静态定位的元素不遵守左,上,右和底规则:

相对定位允许您指定相对于HTML流中元素的正常位置的特定偏移量(左,顶等)。因此,如果我在一个div中有一个文本框,我可以应用相对定位的文本框,以显示在特定的地方相对于它通常放置在div的位置:

还有绝对定位 – 您可以指定元素相对于整个文档的精确位置,或者指向元素树上的下一个相对定位的元素:

并且当position:relative应用于层次结构中的父元素时:

注意我们的绝对位置元素是如何被相对定位的元素绑定的。

最后是固定的。固定定位将元素限制在视口中的特定位置,该位置在滚动期间保持原位:

您还可以观察固定位置的元素不会导致滚动的行为,因为它们不被视口约束:

而绝对定位的元素仍然由视口绑定,并将导致滚动:

当然你的父元素使用overflow:?以确定滚动的行为(如果有的话)。

通过绝对定位和固定定位,元素从HTML流中取出。

猜你在找的CSS相关文章