gpt4 book ai didi

html - z-index 不会工作

转载 作者:太空宇宙 更新时间:2023-11-04 09:41:32 24 4
gpt4 key购买 nike

我正在努力实现 erf_fromtoz-index 高于 left_side,因为 left_side 确实有边框,而我希望 erf_fromto 越过边框。

这是目前的样子,而我希望 erf_fromto 越界。

enter image description here

  <body class="parent" ng-app="myApp">
<div class="left_side child"></div>
<div class="right_side">
<div class="erf_block" style="position:relative;">
<div class="erf_fromto">2011 - 2012</div>
</div>
</div>

</body>

CSS:

.left_side {
width:35%;
float:left;
border-right: 3px solid #F6F6F6;
}

.parent {
overflow: hidden;
position: relative;
}


.child {
height: 100%;
position: absolute;
}


.erf_fromto {
position: absolute;
left: -122px;
border: 2px solid #F6F6F6;
padding: 5px;
font-weight: bold;
box-shadow: 0px 0px 2px #F6F6F6;
font-size: 15px;
z-index: 99;
overflow: hidden;
}

代码笔:http://codepen.io/anon/pen/XjzwdN

最佳答案

z-index 适用于一个元素及其子元素。由于 .erf_fromto 嵌套在 .erf_block 内,它位于 .right_side 内,您需要确保它是 .right_side 具有比 .left_side 更高的 z-index!

来自 MDN :

The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

关于html - z-index 不会工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39860193/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com