Html 如何更改bg图像的堆叠顺序？_Html_Css_Background Image

Html 如何更改bg图像的堆叠顺序？

html css

Html 如何更改bg图像的堆叠顺序？,html,css,background-image,Html,Css,Background Image,如何在不更改html的情况下使嘴巴、眼睛和眉毛显示在脸的上方？嘴巴放错位置了，所以我能看见 <body> <div id = "shoulders"> <div id = "face"> <div class = "eyebrow" id = "lefteyebrow"> </div> <div class = "eyebrow" id = "righteyebrow">

如何在不更改html的情况下使嘴巴、眼睛和眉毛显示在脸的上方？嘴巴放错位置了，所以我能看见

    <body>

<div id = "shoulders">

    <div id = "face">
        <div class = "eyebrow" id = "lefteyebrow"> </div>

        <div class = "eyebrow" id = "righteyebrow"> </div>

        <div class = "eye" id = "lefteye"> </div>

        <div class = "eye" id = "righteye"> </div>

        <div id = "mouth"></div>

    </div>

</div>
</body>

尝试css属性：z-index

   <div class = "eyebrow" id = "lefteyebrow" style="z-index:0"> </div>

    <div class = "eyebrow" id = "righteyebrow" style="z-index:1"> </div>

您可以将z索引添加到CSS中。请注意z-index只对显式定位的元素有效，所以只需添加一个位置：relative。最大的z指数将位于顶部

例如：

#face, .eyebrow, .eye {
    position: relative;
}

#face {
    z-index: 1;
}

.eyebrow {
    z-index: 2;
}

.eye {
    z-index: 2;
}

你有几种方法来实现你想要的

如前所述，您可以使用z索引。请记住，如果页面结构复杂，不建议使用z-index

更简单的方法可能是使用简单的相对/绝对定位。下面是一个解释CSS定位的好例子。这是你的照片的一个例子，你的嘴和头放在肩膀上