Hi,我们又见面了,我是小鑫同学1024,今天带来了2021年技术梳理篇《CSS定位-position》
作用
用来指定元素在网页上的位置,定位的方式有5种,分别是:static,relative,fixed,absolute,sticky
static
浏览器默认定位元素方式,浏览器会按照源码顺序来排列元素位置,使用static定位时top,bottom,left,reght设置无效
relative,absolute,fixed
共同特点:
1. 均基于特定基点进行定位
2. 均不会对其他元素位置产生影响,故会出现重叠现象
3. 确定位置: top,bottom,left,right
relative
- 基点: 元素默认位置
示例:
absolute
- 基点: 非static定位方式的父元素/html根元素
注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
示例一:父元素非static定位方式
示例二:父元素为static定位方式
fixed
- 基点: 浏览器窗口,元素固定网页显示
示例:
sticky
特点: "动态固定" 生效门槛: 浏览器把top,buttom,left,right的值当作sticky的生效门槛 具体规则:
- 当页面滚动，父元素部分不可见，只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；
- 等到父元素完全不可见，fixed定位自动切换回relative定位。
注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。
示例: head吸顶效果
本篇内容到此就结束了,感谢你的阅读,我是小鑫同学1024,一个5年滴，Bug，来者不拒，断点打起来，3年Android开发，2年+Vue前端开发，混合App开发的程序员,如果文章对你有所帮助,希望可以动动你的小手[赞]、[666]、[来看我],我们下篇文章见[灵光一闪]~