十八、学会定位,你想让盒子放在哪儿就放在哪里(2)之固定定位、元素的层级关系

固定定位

还有一种定位叫 固定定位 ,它可以让盒子固定在屏幕中的某个位置,俗称 死心眼型 定位,相对于浏览器可视区域进行定位、移动。

固定定位( position: fixed; )也需要配合方位属性实现移动,在页面中不占位置,已经脱标。

最后,来个总结:

元素的层级关系

布局方式不同,元素的层级也不同,一般不同布局方式元素的层级关系为:定位 > 浮动 > 标准流

不同定位 之间的层级关系也不同,绝对定位、相对定位、固定定位默认层级相同,此时 HTML 中写在 下面 的元素层级更高,会覆盖上面的元素。

例如:下面两元素都采用绝对定位,类 two 在下面,所以粉色样式层级更高:

再看一个,下面的样式设置与上面相同,唯一不同的是,下面的 HTML 结构发生了改变,将原来的 类 two 放在了 类 one 的上边,所以 类 one 的样式层级更高,即蓝色样式的层级比粉色样式的层级要高:

那么如何来修改定位元素的层级呢

想要 更改 定位元素的 层级 ,就要用到 z-index ,它的属性值是数字,数字越大,层级就越高

仍旧以上面的示例来演示:

默认情况下,定位的盒子,后来者居上,但 z-index 会改变元素的层级,z-index 的取值是 整数 ,取值越大,显示的顺序越靠上。它的默认值是 0 ,如上例中,蓝色样式的层级被修改为 1 ,而粉色样式的层级默认是 0 ,所以蓝色样式的显示靠上

最后需要注意的是,z-index配合定位 才会生效。

相关推荐
勇往直前plus39 分钟前
前端三基石:从后端视角理解 HTML、CSS 与 JavaScript
前端·css·html
smchaopiao3 小时前
如何用CSS和JS搞定全屏图片展示
前端·javascript·css
酉鬼女又兒3 小时前
零基础快速入门前端CSS Transform 与动画核心知识点及蓝桥杯 Web 应用开发考点解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·css·职场和发展·蓝桥杯·html
大漠_w3cpluscom6 小时前
CSS 技巧:CSS 中选择 html 元素的各种奇技淫巧
前端·css·weui
sensen_kiss7 小时前
CAN302 电子商务技术 Pt.2 深入了解HTML和CSS
前端·css·学习·html
是上好佳佳佳呀10 小时前
【前端(三)】CSS 属性梳理:从字体文本到背景表格
前端·css
whuhewei10 小时前
CSS文字外描边
前端·css
英俊潇洒美少年1 天前
css中专门用来提升渲染性能、减少重排重绘的属性
前端·css
我是伪码农1 天前
14届蓝桥杯
javascript·css·css3
是上好佳佳佳呀1 天前
【前端(二)】CSS 知识梳理:从编写位置到选择器优先级
前端·css