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

Question

如何在不改变 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>

https://jsfiddle.net/tvkhb8zt/

Answer 1

试试 css 属性: z-index

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

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

Answer 2

您可以将 z-index 添加到 CSS。请注意 z-index 仅适用于明确定位的元素，因此只需添加一个 position: relative 即可。最大的 z-index 将在顶部。

例如：

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

#face {
    z-index: 1;
}

.eyebrow {
    z-index: 2;
}

.eye {
    z-index: 2;
}

Answer 3

您有多种方法可以实现您的目标。

如前所述，您可以使用 z-index。请记住，如果您的页面结构复杂，则不建议使用 z-index.
更简单的方法可能是使用简单的 relative/absolute 定位。这是一个很好的 article of explaining CSS positioning. This is JSfiddle 图像示例，嘴巴和头位于肩膀上方。

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

How to change stacking order of bg image?

html

css

background-image