Rodrigo Arenas González Asked: 2020-01-11 15:09:56 +0800 CST 2020-01-11 15:09:56 +0800 CST 2020-01-11 15:09:56 +0800 CST 使用 CSS 定位元素(z-index 不起作用) 772 美好的一天,希望你能帮助我我想将云定位在看起来更暗的元素下,但不幸的是我一直无法做到,需要注意的是,我在云和云中都使用了 z-index在容器中,但不幸的是什么也没发生,有人可以帮我解决这个问题,我真的很感激。 我的容器是这样的 <div class="banner-section"> <img src="src/img/nubes-efecto-paralax.svg" alt="" class="nube-img"> 图像的 CSS 属性如下: .nube-img{ width: 100%; position: absolute; margin-top: 170px; } css 1 Answers Voted Best Answer Edgar Gutiérrez 2020-01-11T22:01:07+08:002020-01-11T22:01:07+08:00 Z-index要正常工作,必须满足一些条件,主要有以下几种使用方式: <main class="padre"> <div class="hermano uno"> <img class="hijo" src=".png"/> </div> <div class="hermano dos"> </div> </main> 主要是为了使 z-index 层起作用,它们必须处于同一父级级别,例如,对于上面的代码,z-index 将与两个"siblings"一起工作,但在child和兄弟姐妹 two之间不起作用。需要添加的另一件事是position: relative,fixed或absolute视情况而定。那么,正式书面的条件将是: 位于层中的元素必须在 html 布局中处于同一层次结构中。 他们必须声明的位置与默认的static不同。 嵌套在较低或较高层中的元素将继承在其容器中声明的层,但绝不会与声明给包含祖先的层或父元素的“兄弟”元素重叠。 最典型的错误是认为这将在 css 中起作用,如下所示: .hermano, .hijo {position: relative;} .hijo{z-index: 1; } .hermano.dos {z-index: 9999} 如果“孩子”图像大于“一哥”的高度,它将与“二哥”重叠,所以当你想纠正这个问题时,你可以尝试在非常高的“二哥”上使用 z-index 来尝试没有更正的结果,但是正如我向您提到的,由于儿子和兄弟不在同一水平上,这将永远行不通,在这种情况下,您必须在两个兄弟中声明z-index并增加将重叠的值,如下所示: .hermano, .hijo {position: relative;} .hermano.uno {z-index: 1} .hijo{} .hermano.dos {z-index: 2} 我希望这很清楚,或者确实是您遇到的错误,事实是,正如许多人在问题中评论您的代码一样,它不会重现错误并且很难知道如何以最好的方式帮助您。成功!
Z-index要正常工作,必须满足一些条件,主要有以下几种使用方式:
主要是为了使 z-index 层起作用,它们必须处于同一父级级别,例如,对于上面的代码,z-index 将与两个"siblings"一起工作,但在child和兄弟姐妹 two之间不起作用。需要添加的另一件事是position: relative,fixed或absolute视情况而定。那么,正式书面的条件将是:
最典型的错误是认为这将在 css 中起作用,如下所示:
如果“孩子”图像大于“一哥”的高度,它将与“二哥”重叠,所以当你想纠正这个问题时,你可以尝试在非常高的“二哥”上使用 z-index 来尝试没有更正的结果,但是正如我向您提到的,由于儿子和兄弟不在同一水平上,这将永远行不通,在这种情况下,您必须在两个兄弟中声明z-index并增加将重叠的值,如下所示:
我希望这很清楚,或者确实是您遇到的错误,事实是,正如许多人在问题中评论您的代码一样,它不会重现错误并且很难知道如何以最好的方式帮助您。成功!