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

固定定位

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

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

最后,来个总结:

元素的层级关系

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

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

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

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

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

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

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

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

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

相关推荐
henry1010103 小时前
Deepseek辅助生成的HTML5网页版抄经典《弟子规》
前端·javascript·css·html·html5
悦悦子a啊8 小时前
CSS 知识点
开发语言·前端·css
悦悦子a啊9 小时前
Web前端 练习1
前端·css·html5
剑亦未配妥10 小时前
CSS 折叠引发的 scrollHeight 异常 —— 一次 Blink 引擎的诡异 Bug
前端·css·bug
念念不忘 必有回响1 天前
前端判断文本是否溢出:单行与多行场景的完整解析
前端·javascript·css·vue.js
@菜菜_达1 天前
CSS是什么?
前端·css
Amumu121381 天前
CSS基础选择器
前端·css
陆枫Larry1 天前
CSS 踩坑笔记:为什么列表底部的 margin-bottom 总是“失效”?
css
陆枫Larry1 天前
深入浅出:CSS 中的“隐形结界”——BFC 详解
前端·css
coding随想1 天前
深入Modernizr源码:揭秘CSS伪类检测的底层逻辑
前端·css