1.相对定位
/*元素开启了相对定位*/
position:relative;
相对定位的特点:
1.开启相对定位,元素不会脱离文档流,元素不会改变元素的性质。
2.开启相对定位后,不设置偏移量,元素的位置不会发生任何变化。
3.开启相对定位后,设置的偏移量,是根据元素原来的位置进行定位的。
4.开启相对定位后,会提升元素的层级。
2.绝对定位
/*元素开启了绝对定位*/
position:absolute;
绝对定位的特点:
1.开启绝对定位之后,如果不设置元素偏移量,元素位置不会发生变化。
2.开启绝对定位后,元素会脱离文档流,并且元素性质发生改变(块元素不再独占一行,宽高都被内容撑开)
3.开启绝对定位后,该元素是参考离它最近的开启了定位的祖先元素所定位的,如果所有的祖先元素都没开启定位,则它的包含块是初始包含块。
在实际开发中,常常给该元素开启定位之后,同时也会给它的父元素开启相对定位。
4.绝对定位会提升元素层级。
3.固定定位
/*元素开启了固定定位*/
position:fixed;
固定定位的特点:
固定定位是一种绝对定位,它的大部分特点与绝对定位相同,不同点在于,固定定位永远是参照于浏览器窗口进行定位的。一旦定位,就不会随窗口进行滚动,永远在可视窗窗口的固定位置。
4.粘滞定位
/*元素开启了粘滞定位*/
position:sticky;
粘滞定位的特点和相对定位类似,不会脱离文档流。
定位的参照物:粘滞定位是相对于离它最近的拥有滚动条的祖先元素来定位的。