CSS 的几种 position 定位

1、static:静态定位,所有标准文档流中的元素默认值。

该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

2、relative:相对定位,不脱离标准文档流。

该关键字指定元素会相对于自身标准文档流中的位置进行相应的偏移可以给元素设置 top、right、bottom、left 值;

主要用途:微调元素、作为绝对定位的参考(子绝父相)。

3、absolute:绝对定位,脱离标准文档流。

该关键字指定元素的特点:(1)没有父元素时,相对于浏览器定位(2)有父元素且父元素是 static 定位时,相对于浏览器定位(3)有父元素且父元素是非 static 定位时,相对于该父元素定位(多层父元素,相对于最近的非 static 父元素定位)(4)绝对定位后的元素在页面上脱离标准文档流,不占据位置。

4、fixed:固定定位,脱离标准文档流,相对于浏览器定位。

该关键字指定元素定位的参照物总是当前的文档。利用 fixed 定位,很容易让一个 div 定位在浏览器文档的某个位置。

主要用途:页面中固定位置的小广告

5、sticky:粘性定位,是 relative 和 fixed 两种定位集于一体的特殊定位。

特点:(1)元素在跨越特定阈值之前为相对定位,之后为固定定位。特定阈值是指 top、right、bottom、left 其中一个属性,只有设置特定阈值,才能使该定位生效,否则跟 relative 相对定位相同。(top 优先级比 bottom 高,left 优先级比 right 高)(2)设定 sticky 定位元素的任意父节点的 overflow 属性必须是 visible(overflow 默认值),否则 sticky 定位不生效。(3)父元素是非 static 定位,则相对于该父元素定位,否则相对于浏览器窗口定位。

主要用途:滑动超过阈值时,隐藏标题栏,小于阈值时,显示标题栏。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章