首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用z-index的CSS不会将子元素放在其父元素后面

使用z-index的CSS可以控制元素的层叠顺序,但它不会将子元素放在其父元素后面。z-index属性用于指定元素在层叠上下文中的显示顺序,具有较高z-index值的元素将覆盖具有较低z-index值的元素。

在HTML中,元素的层叠顺序是由其在DOM树中的位置决定的。子元素通常会被绘制在父元素之上,无论z-index的值如何设置。这是因为子元素在DOM树中位于父元素内部,绘制顺序是从内到外的。

如果想要将子元素放在父元素后面,可以使用其他方法,例如改变HTML结构或使用定位属性。一种常见的方法是使用position属性将父元素设置为相对定位(position: relative),然后将子元素设置为绝对定位(position: absolute),并通过top、left等属性来控制子元素的位置。这样子元素就可以覆盖父元素或位于其后面。

总结:

  • 使用z-index的CSS属性可以控制元素的层叠顺序,但不会将子元素放在其父元素后面。
  • 元素的层叠顺序是由其在DOM树中的位置决定的,子元素通常会被绘制在父元素之上。
  • 如果需要将子元素放在父元素后面,可以使用其他方法,如改变HTML结构或使用定位属性。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于定位position相关知识

再次强调,所有的元素都可以进行定位处理~! 何时使用position HTML+CSS布局方式之中,最为常见有两种布局模式,分别是浮动布局和定位布局。...在我们平时,使用最多就是浮动布局,当在页面当中出现多个元素层叠状态时,我们则会考虑定位布局。...元素设置position:absolute时,针对哪个元素定位 设置属性值为 absolute 会将对象拖离出正常文档流绝对定位而不考虑它周围内容布局。...拥有最高堆叠顺序元素总是会处于堆叠顺序较低元素前面。z-index只能针对同级标签有效,也就是说标签z-index值对于父标签是无效,因为两者级别不同z-index是无法比较。...因此,针对两个设置绝对定位元素,进行层级比较时,首先应当比较其父级,再比较级,换句话说——“拼爹”。

94050

掌握CSSz-index

层叠上下文可以通过以下任意方式进行创建: 元素position属性值为absolute或者relative,且z-index值不为auto。 flex容器元素,且z-index值不为auto。...z-index只作用于定位元素 如果你想控制元素层叠顺序,你可以使用z-index达到目的。...这通常意味着将分层元素彼此重叠,并设置不断增加z-index值。要把一个元素放在另一个元素下面,它只需要有一个较低z-index值,但这个较低值可以是负值。...当使用元素并希望将其定位在其父元素内容之后时,负值z-index是非常有用。...由于层叠上下文工作方式,对于任何:before或:after元素,如果它们要被定位在其父元素文本内容后面,那么它们需要一个负z-index值。

78330
  • 定位(position)

    1、边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线距离 bottom 底部偏移量,定义元素相对于其父元素下边线距离 left 左侧偏移量,定义元素相对于其父元素左边线距离...right 右侧偏移量,定义元素相对于其父元素右边线距离 2、定位模式(定位分类) 在CSS中,position属性用于定义元素定位模式,其基本语法格式如下: 选择器{position:属性值...其次,每次移动位置,是以自己左上角为基点移动(相对于自己来移动位置) 就是说,相对定位盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。...在CSS中,要想调整重叠定位元素堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。...比如: z-index: 2; 注意: z-index默认属性值是0,取值越大,定位元素在层叠元素中越居上。 如果取值相同,则根据书写顺序,后来居上。 后面数字一定不能加单位。

    1.3K30

    CSS-定位(position)

    2.边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线距离 bottom 底部偏移量,定义元素相对于其父元素下边线距离 left 左侧偏移量,定义元素相对于其父元素左边线距离...# 父级有定位 绝对定位是将元素依据最近已经定位(绝对、固定或相对定位)元素(祖先)进行定位。 # 绝父相 这个“绝父相”太重要了,是我们学习定位口诀。...绝父相就是指元素设置绝对定位,而父元素设置相对定位。 换句话说:如果要对一个元素使用定位的话,让元素(绝对定位)以其父元素(相对定位)为标准来定位。...在CSS中,要想调整重叠定位元素堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。...注意: z-index默认属性值是0,取值越大,定位元素在层叠元素中越居上。 如果取值相同,则根据书写顺序,后来居上。 后面数字一定不能加单位。

    1.5K10

    前端成神之路-定位

    定位 将盒子定在某一个位置 自由漂浮在其他盒子上面 —— CSS 离不开定位,特别是后面的 js 特效。 2....在 CSS 中,通过 top、bottom、left 和 right 属性定义元素边偏移:(方位名词) 边偏移属性 示例 描述 top top: 80px 顶端偏移量,定义元素相对于其父元素上边线距离...bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线距离。 left left: 80px 左侧偏移量,定义元素相对于其父元素左边线距离。...绝父相 —— 级是绝对定位,父级要用相对定位。 绝父相是使用绝对定位口诀,要牢牢记住! 疑问:为什么在布局时,元素使用绝对定位时,父级元素就要用相对定位呢?...5.2 堆叠顺序(z-index) 在使用定位布局时,可能会出现盒子重叠情况。 加了定位盒子,默认后来者居上, 后面的盒子会压住前面的盒子。

    1.9K20

    C1 能力认证——Web基础

    ,且满足冒号前基础选择器选取要求 :first-of-type 用于选取属于其父元素第一个特定类型元素 :last-child 用于选取属于其父元素最后一个元素且满足基础选择器选取要求 :last-of-type...用于选取属于其父元素最后一个特定类型元素 :nth-child(N) 选择匹配属于其父元素第N个子元素且满足基础选择器选取要求,N可以为数字、关键字(odd / even)、公式(如:2n+1...) :nth-of-type(N) 选择匹配属于其父元素第N个指定类型元素,N可以为数字、关键字(odd / even)、公式 :nth-last-child(N) 选择匹配属于其父元素第N个子元素且满足基础选择器选取要求...,从最后一个元素开始计数,N可以为数字、关键字(odd / even)、公式 :nth-last-of-type(N) 选择匹配属于其父元素第N个指定类型元素,从最后一个元素开始计数,N可以为数字...属性值越高,层级越高,层级高元素会覆盖层级低元素 z-index值相同时,后面元素会覆盖前面的 box2z-index值为9,box1z-index值设置小于或等于9时,即可实现box2定位在

    3.4K40

    CSS笔记(14)

    边偏移属性 示例 描述 top top : 80px 定义元素相对其父元素上边线距离 bottom bottom : 80px 定义元素相对其父元素下边线距离 left left : 80px 定义元素相对其父元素左边线距离...绝父相: 使用绝对定位,父级使用相对定位 级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来位置....当然,绝父相不是永远不变,如果父元素不需要占有位置,绝父绝也会遇到. 4.固定定位 固定定位是元素固定于浏览器可视区位置.主要使用场景:可以在浏览器页面滚动元素元素位置不会改变....定位总结: 定位叠放次序: z-index使用定位布局时,可能会出现盒子重叠情况.此时,可以使用z-index来控制盒子前后次序....数字后面不能加单位 只有定位盒子才有z-index属性. 绝对定位盒子居中 想要实现绝对定位盒子居中,想要用原来margin:auto是会失效(相对定位是可以!!!)

    59310

    CSS层叠上下文与顺序

    五、层叠上下文特性 层叠上下文元素有如下特性: 层叠上下文层叠水平要比普通元素高(原因后面会说明); 层叠上下文可以阻断元素混合模式; 层叠上下文可以嵌套,内部层叠上下文及其所有元素均受制于外部层叠上下文...两个妹子层叠顺序比较变成了优先比较其父级层叠上下文元素层叠顺序。...在CSS2.1时代,z-index属性必须和定位元素一起使用才有作用,但是,在CSS3世界里,非定位元素也能和z-index愉快地搞基。...默认情况下,mix-blend-mode会混合z轴所有层叠在下面的元素,要是我们希望某个层叠元素参与混合怎么办呢?就是使用isolation:isolate。...而本demo中文字元素在图片元素前面,于是,当CSS3动画只要不是最终一瞬间opacity: 1,位于DOM流后面的图片就会遵循“后来居上”准则,覆盖文字。

    95210

    css-height

    如果当前元素设置高度100%,其父元素(包含块)未设置高度,则会受到元素影响(前提,元素未脱离文档流,后续说明) 值为100% <!...,浏览器会为其分配可使用最大宽度(比如全屏宽度),但是不负责分配高度,块级元素高度是由元素堆砌撑起来。...绝对定位元素高度 设置height:100%;,受其父级定位元素影响; 设置任何高度,默认为height:auto;,受其元素内容高度影响(前提,元素未脱离文档流); 示例:absolute元素height...注意: 这是定位元素受到父级定位元素高度影响行之有效方式! 绝对定位元素父级高度与元素本身大小无关,直到文档后面元素都被处理完毕,才可能知道高度。...这是很赞特性,因为如果页面很复杂,避免使用position: relative会让你少去很多z-index混乱层级覆盖麻烦。 获取元素高度 <!

    1.1K21

    CSS定位特性

    无序列表dl dt dd 写了2个晚上终于把这个写完了 定位 将盒子定在某一个位置,所以定位是在摆盒子,按照定位方式移动盒子 定位=定位模式+边偏移 定位模式 通过CSSposition值来设定...bottom bottom:80px 底部偏移量,定位元素相对于其父元素下边线距离 left left:80px 左部偏移量,定位元素相对于其父元素左边线距离 right right:80px 右部偏移量...,定位元素相对于其父元素右边线距离 相对定位 是元素在移动位置时候,相对于原来位置来说 选择器{position:relative;} 绝对定位 在移动时候,相对于它祖先元素来说 选择器...绝父相 父元素加相对定位,元素加绝对定位 父盒子不加定位的话,元素定位将由浏览器页面为准 固定定位 固定在浏览器可视区域,与父元素无关 position:fixed; 固定到版心 贴版心右侧...粘性定位占有原先位置 必须加一个边偏移才能有效 定位叠放次序 通过z-index值来确定哪个靠上面 数值越大,盒子越靠上,可正可负 {z-index:2;} 绝对定位盒子居中 加了绝对定位盒子不能通过

    58640

    超全整理前端开发面试题——CSS篇(2016年)

    举例: p:first-of-type 选择属于其父元素首个 元素每个 元素。 p:last-of-type 选择属于其父元素最后 元素每个 元素。...p:only-of-type 选择属于其父元素唯一 元素每个 元素。 p:only-child 选择属于其父元素唯一元素每个 元素。...p:nth-child(2) 选择属于其父元素第二个元素每个 元素。 :after 在元素之前添加内容,也可以用来做清除浮动。...没有定位,元素出现在正常流中(忽略 top, bottom, left, right z-index 声明)。 inherit 规定从父元素继承 position 属性值。...* Chrome 中文界面下默认会将小于 12px 文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

    2.6K130

    让你兴奋不已13个CSS技巧🤯

    使用CSS,您就可以通过边框创建一个三角形。 这是一个相当老技巧。理想情况下,你会在一个宽度和高度都为零元素上设置边框。所有的边框颜色都是透明,除了那个将形成箭头边框。...有时,你可能会设置一个 z-index 属性让元素层级较低,结果却发现它隐藏在其父元素背景之后。为了防止这种情况,你可以在父元素上创建一个新堆叠上下文,防止元素隐藏在其后面。...然而,另一种不太受欢迎在x轴上居中元素方法是使用 text-align CSS属性。这个属性在居中文本时就能直接使用。要想在DOM中也居中其他元素元素需要有一个 inline 显示。...浏览器会将超出元素宽度长文本进行换行。所以你需要阻止这种情况: white-space: nowrap; 。 溢出内容应被剪裁: overflow: hidden; 。...另一方面,可以使用 user-select: none; 来禁用文本选择。禁用文本选择另一种方法是将文本放在 ::before 或 ::after CSS元素 content: ''; 属性中。

    31750

    【面试篇】金九银十面试季,这些面试题你都会了吗?

    ,如何在即保证破坏现有页面,又提供新渲染机制呢?...设置百分比高度:在standards模式下,一个元素高度是由其包含内容来决定,如果父元素没有设置百分比高度,元素设置一个百分比高度是无效用margin:0 auto设置水平居中:使用margin...important > id > class > tag important 比 内联优先级高 CSS3新增伪类举例: dom:first-of-type 选择属于其父元素首个 元素每个 元素。...dom:last-of-type 选择属于其父元素最后 元素每个 元素。 dom:only-of-type 选择属于其父元素唯一 元素每个 元素。...dom:only-child 选择属于其父元素唯一元素每个 元素。 dom:nth-child(2) 选择属于其父元素第二个元素每个 元素

    87730

    (2019)面试题:CSS display和position属性值有哪些?

    问题 CSS display和position属性值有哪些? Hello,欢迎来到我博客,每天一道面试题,我们共同进步。...除了static值,在其他三个值设置下,z-index才会起作用。...(确切地说z-index只在定位元素上有效) relative和absolute都可以用于定位,区别在于前者div还属于正常文档流,后者已经是脱离了正常文档流,不占据空间位置,不会将父类撑开。...所以设置了position:absolute,其父该属性值要注意,而且overflow:hidden也不能乱设置,因为不属于正常文档流,不会占据父类高度,也就不会有滚动条。...页面上很多效果都是父相(relative)绝(absolute)来实现。 position:inherit。规定从父类继承position属性值,所以这个属性也是有继承性

    1.5K00

    前端开发面试题答案(二)

    p:last-of-type 选择属于其父元素最后 元素每个 元素。 p:only-of-type 选择属于其父元素唯一 元素每个 元素。...p:only-child 选择属于其父元素唯一元素每个 元素。 p:nth-child(2) 选择属于其父元素第二个元素每个 元素。...没有定位,元素出现在正常流中(忽略 top, bottom, left, right z-index 声明)。 inherit 规定从父元素继承position 属性值。...一个用于页面布局全新CSS3功能,Flexbox可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用空间。...清除浮动方式 清除浮动是为了清除使用浮动元素产生影响。浮动元素,高度会塌陷,而高度塌陷使我们页面后面的布局不能正常显示。

    1.4K40

    css笔记 - 张鑫旭css课程笔记之 z-index

    一、z-index语法、支持属性值等 z-index: 在支持z-index元素上,  z-index规定了元素(包括元素垂直z方向层级顺序,  z-index可以决定哪个元素覆盖在哪个元素上边...z-indexcss2.1中需要和定位元素(position为relative、absolute、fixed、sticky等这些)配合使用才有作用。...普通元素设置z-index情况下: 如果 都没有设置 z-index层级,那么后边元素覆盖前边元素。即后来居上 如果z-index设置了 具体数值,那么数值大覆盖数值小。...b和其父元素z-index值都为1,即使b在a后边,即使a元素z-index:auto;比b元素小, 但是az-index值比b元素还大,所以a在上边。...元素transform值不是none 4. 元素mix-blend-mode(混合效果)值不是normal 5. 元素(css3)filter值不是none 6.

    93410
    领券