菜鸟笔记
提升您的技术认知

div元素定位的五种方法及其区别

阅读 : 1718

方法一:默认定位,也就是静态定位,不需要设置定位属性

方法二:固定定位,相对于视口区进行定位。

position:fiexd

区别: 固定在视口区的某一位置, 原先位置不保留,会被后面的元素占有, 如果没有设置定位属性,在原来位置定位。

方法三:相对定位,相对于它自己原来的位置进行定位。

 position: relative;

区别:有定位属性时,原先位置保留,不会被后面的元素占有,不脱离文档流;没有定位属性时,默认在当前位置。

方法四:绝对定位,相对于离它最近的定位祖先元素进行定位。

 position: absolute;

区别: 有定位祖先元素,相对于离它最近的定位祖先元素进行定位;没有定位祖先元素,相对于视口区进行定位,定位时脱离文档流,原先位置不保留,会被后面的元素占有,如果没有设置定位属性,在原来位置显示。

方法五:粘性定位,刚开始是相对定位的效果,然后页面滚动到合适的位置,变成固定定位。

 position: sticky;

区别:定位时不脱离文档流,原先位置保留,不会被后面的元素占有, 没有设置定位属性时,默认在原先位置显示。