定位的层级

如果只给一个元素绝对定位,而不写trbl值的话,会以原位显示

定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素,在同一个位置的话,后面的元素默认会压住前面的元素。如果同样是定位了的元素,默认他们的层级都是0,只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上,这个时候就需要改变层级的关系,用z-index来改变。

z-index的取值范围0---9999999,最好是正数,尽量不要用负数。

下面是没有控制层级的显示效果,粉色的块是在蓝色的块的上面的,

下面是加了层级后的效果,粉色的块加的层级是1,而给蓝色的块加了层级是2,然后浏览器中显示的效果就是层级是2的蓝色快压住了层级是1的粉色块。

以上的代码形象的演示出了层级的效果,同样的都采用了绝对定位,但是都没有添加left,right,bottom和top值,所以就会产生第一种效果,后面的块级会压住前面的块级。

时间: 2024-10-25 06:58:46

定位的层级的相关文章

ChroPath插件,xpath 通过递进方式定位有层级关系的页面元素的2种写法。

试验页面http://ui.imdsx.cn/uitester/ 目标:定位到页面元素 “单击” . 第一种写法://div[@class='driver'][3]/div[@class='inner'][3] (定位到单击按钮的 div标签) 第二种写法://div[@class='driver'][3]//*[@id='onC'] (定位到 单击 按钮) xpath提供的定位命令灵活使用. 原文地址:https://www.cnblogs.com/xuexizongjie/p/1114875

CSS层级(浮动,定位的层级提升)

总结: 浮动提升半层,只有在浮动的时候 才需要考虑元素分两层 定位元素提升一层 相对定位会有残留 参考文章:https://blog.csdn.net/houyanhua1/article/details/79558136?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task 原文地址:https://www.cnblogs.com/xiaohaodeboke

绝对定位模拟固定定位效果...

今天下班,突然发现同学在群里求救解决固定定位在移动端偏移的问题,本屌丝猛地一颤:那一天,我终于回想起来了,曾经一度被ios固定定位失效所支配的恐怖,还有被市场妹子一脸嘲讽的看着的那份屈辱...(本屌意淫一下巨人). 真是情况就是,ios对固定定位的支持有点奇葩,当固定定位的层里有input一类的能调动虚拟键盘的元素时,一旦用户聚焦这些元素,固定定位的层级中的元素会发生位移,也就是俗称的页面错乱了,本屌当时寻遍网上各种方案,试了大半天时间(其实,就是因为没钱穷屌丝一枚,没有水果手机,每次测试都要厚

CSS浮动与定位

一 标准流 块级元素占据一行显示,行内元素在一行上显示   --   元素按照原来的显示方式显示 ---  标准流 二 浮动 1 浮动的作用与用法 float 设置元素是否浮动或者如何浮动 none 不浮动 left 左浮动 right 有浮动 2 浮动的特点 1 浮动的元素不占据原来在标准流中的位置  --   (脱离标准流) 2 浮动可以让块级元素在一行上显示,让行内元素可以设置宽高 --  本质上是实现了模式的转换 3 浮动的元素顶端对齐 3 清除浮动 浮动带来的影响: 所有的子盒子都浮动

Lesson4(定位、超出隐藏)

1.外边框 outline:1px solid blue; 外边框用法和边框相似,外边框不占空间,只会显示 2.定位 position (1)相对定位 relative:对自身的一种定位 1>给父级设置相对定位之后,自己也跟随父级移动 2>给元素设置相对定位之后,不会影响其他元素的位置(即没有脱离文档流.还占有原来的空间) (2)绝对定位 absolute:相对于父级的定位 1>脱离文档流,不占原来的空间 2>定位在不设置top等方向值时,位置不会发生变化 3>定位的层级是要

css 定位布局

文档流: 文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列.块元素占一行,行内元素在一行之内从左到在排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置. 关于定位: 可以使用css的position属性来设置元素的定位类型,position设置项如下: (1)relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移. (2)absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相

[Web 前端] 019 css 定位之绝对定位与相对定位

1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素元素脱离文档流不占据文档流的位置可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位如果找不到,则相对于 body 元素进行定位 fixed 生成固定定位元素元素脱离文档流不占据文档流的位置可以理解为

盒子属性,浮动,定位

1.盒子常见属性 1)容器盒子 Box-size:设置盒子模型,CSS3标准, content-box:正常默认模式,起源于谷歌,元素的整体大小会被内边距和边框撑开 border-box:怪异模式,起源于IE,元素的整体大小不会被内边距和边框撑开 Width:宽度 Height:高度 注意:width,height会根据box-size盒子模型的不同来决定是内容的宽度和高度,还是整个元素大小的宽度和高度. 2)Padding:内边距 Padding-left,padding-right,padd

前端开发入门到实战:css 定位布局

文档流: 文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列.块元素占一行,行内元素在一行之内从左到在排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置. 关于定位: 可以使用css的position属性来设置元素的定位类型,position设置项如下: (1)relative?生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移. (2)absolute?生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相