bgイメージの積み上げ順序を変更するにはどうすればいいですか？

htmlを変更せずに口元、目、眉が顔の上に表示されるようにするにはどうすればよいですか？bgイメージの積み上げ順序を変更するにはどうすればいいですか？

<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/

出典

2017-04-06 Anonymous

あなたが望むものを達成するために、いくつかの方法があります。

前述のように、z-indexを使用することができます。ページの複雑な構造がある場合は、z-indexを使用することはお勧めしません。
簡単なアプローチは、単純相対/絶対配置を使用することです。ここには、articleのCSSの説明があります。これは、肩の上に位置する口と頭を持つ画像の例です。JSfiddle

出典

2017-04-06 14:59:43 Alyona

トライCSSプロパティ（私はそれを見ることができるように、口の中には、間違った位置にある）：Zインデックス

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

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

出典

2017-04-06 14:35:03 Julian

あなたはCSSにZインデックスを追加することができます。 Zインデックスは明示的に配置された要素に対してのみ機能するので、相対的な位置も追加してください。最大のZインデックスが上に表示されます。だから、

例えば：

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

#face { 
    z-index: 1; 
} 

.eyebrow { 
    z-index: 2; 
} 

.eye { 
    z-index: 2; 
}

出典

2017-04-06 14:39:27 StefanBob

bgイメージの積み上げ順序を変更するにはどうすればいいですか？

答えて

関連する問題