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

1. 基点: 元素默认位置

示例:

absolute

1. 基点: 非static定位方式的父元素/html根元素

注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。

示例一:父元素非static定位方式

示例二:父元素为static定位方式

fixed

1. 基点: 浏览器窗口,元素固定网页显示

示例:

sticky

特点: "动态固定" 生效门槛: 浏览器把top,buttom,left,right的值当作sticky的生效门槛 具体规则:

1. 当页面滚动，父元素部分不可见，只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；
2. 等到父元素完全不可见，fixed定位自动切换回relative定位。

注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。

示例: head吸顶效果

本篇内容到此就结束了,感谢你的阅读,我是小鑫同学1024,一个5年滴，Bug，来者不拒，断点打起来，3年Android开发，2年+Vue前端开发，混合App开发的程序员,如果文章对你有所帮助,希望可以动动你的小手[赞]、[666]、[来看我],我们下篇文章见[灵光一闪]~