html – 使用z-index堆叠,子元素位于父级兄弟之上

概述我遇到了这个挑战： fiddle.简短的故事是,我希望在z顺序的中间有绿色块,而不必更改HTML.底部为黄色,中间为绿色,顶部为红色. .parent { background-color: yellow; position: absolute; top: 0; left: 0; height: 200px; width: 200px; z-index: 1;}. 我遇到了这个挑战： fiddle.简短的故事是,我希望在z顺序的中间有绿色块,而不必更改HTML.底部为黄色,中间为绿色,顶部为红色.

@H_502_8@

@H_502_8@

@H_502_8@

.parent {  background-color: yellow;  position: absolute;  top: 0;  left: 0;  height: 200px;  wIDth: 200px;  z-index: 1;}.child {  background-color: red;  position: relative;  top: 10px;  left: 20px;  height: 50px;  wIDth: 150px;  z-index: 100;}.other-guy {  background-color: green;  position: absolute;  top: 40px;  left: 100px;  height: 200px;  wIDth: 200px;  z-index: 50;}

<div >  Chillin in the background  <div >    I really want to be on top.  </div></div><div > I want to be in the mIDdle! </div>

更长的故事是,在我的解决方案中,我使用bootstraps网格系统来定位子元素,因此整个事情都是响应式的.中间层是需要由用户 *** 纵的Google Maps元素.我以前的解决方案在地图上有一个绝对定位的子元素,它有效,但我不知道如何使其响应.@H_502_8@

我的新解决方案在响应角度下运行良好,但后来我发现父级阻止了与地图的交互.@H_502_8@

所以我现在需要一个解决方案,在谷歌地图上有一些响应元素.@H_502_8@解决方法 我从黄色div中删除了绝对位置,并从绿色div中删除了z-index.也许这就像你说的那样.

@H_502_8@

@H_502_8@

.parent {    background-color: yellow;        top: 0;    left: 0;    height: 200px;    wIDth: 200px;    z-index: 1;}.child {    background-color: red;    position: relative;    top: 10px;    left: 20px;    height: 50px;    wIDth: 150px;    z-index: 2;}.other-guy {    background-color: green;    position: absolute;    top: 40px;    left: 100px;    height: 200px;    wIDth: 200px;    }

<div >Chillin in the background    <div >I really want to be on top.</div></div><div >I want to be in the mIDdle!</div>

总结

以上是内存溢出为你收集整理的html – 使用z-index堆叠,子元素位于父级兄弟之上全部内容，希望文章能够帮你解决html – 使用z-index堆叠,子元素位于父级兄弟之上所遇到的程序开发问题。

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