HTML – 你如何获得一个职位：绝对;位置上方的元素：相对;一

概述您可以在 this fiddle中查看该问题. 我有一个绝对定位的元素,其z-index为2,相对定位的元素的z-index为1.相对定位的元素包含绝对定位的元素.我认为z-index：2元素会显示在z-index上面：1个项目,但事实并非如此.有没有办法解决这个问题,以便z-index：2项首先是z-index：1项？ div { background: green; position: 您可以在 this fiddle中查看该问题.

我有一个绝对定位的元素,其z-index为2,相对定位的元素的z-index为1.相对定位的元素包含绝对定位的元素.我认为z-index：2元素会显示在z-index上面：1个项目,但事实并非如此.有没有办法解决这个问题,以便z-index：2项首先是z-index：1项？

div {  background: green;  position: relative;  wIDth: 100%;  z-index: 1;}span {  top: 0;  right: 0;  z-index: 2;  position: absolute;  border: solID 1px red;  height: 70px;  background: white;}

<div>  Row 1  <span>I thought this would show above 'Row 2'</span></div><div>  Row 2</div>

解决方法 当您将z-index添加到位于也具有z-index的定位父元素中的子元素时,父z-index将启动新的堆叠顺序,并且子z-index相对于父级的z-index .因此,在这种情况下,z-index：2仅与具有z-index的父级内部的其他元素进行比较：1.为了解决这个问题,您可以将z-index应用于跨度,或者不要给出最后一个是z-index

您可以在这里阅读更多相关信息https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

body {  Font-family: arial;}* {  padding: 10px;}div {  background: green;  position: relative;  wIDth: 100%;  }div:first-child {  z-index: 1;}span {  top: 0;  right: 0;  z-index: 2;  position: absolute;  border: solID 1px red;  height: 70px;  background: white;  display: inline-block;}

<div>  Row 1  <span>  I thought this would show above 'Row 2'</span></div><div>  Row 2</div>

总结

以上是内存溢出为你收集整理的HTML – 你如何获得一个职位：绝对;位置上方的元素：相对;一全部内容，希望文章能够帮你解决HTML – 你如何获得一个职位：绝对;位置上方的元素：相对;一所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。