divでz-indexを使用して、このタイプのオーバーラップを作成しようとしています:
ただし、親の z-index を「非子」要素の z-index よりも小さい数値に設定すると、子も親と一緒に後ろにとどまります。この問題を克服する方法があるかどうか疑問に思っています..
このようなことをしようとしていますか?
コードを見ないとわかりませんが、一部の DIV を祖先として使用していると思います。それらすべてを個別に使用してみてください。その例はあなたが望むことをします:
<!DOCTYPE html>
<html>
<head>
<title>Positioning test</title>
<style>
div { position: absolute; width: 100px; height: 100px; color: #fff; text-align: center; }
#parent { z-index: 1; background-color: red; left: 100px; top: 20px; }
#not-child { z-index: 2; background-color: green; left: 140px; top: 40px; }
#child { z-index: 3; background-color: blue; left: 70px; top: 60px; }
</style>
</head>
<body>
<div id="parent">Parent</div>
<div id="not-child">Not-child</div>
<div id="child">Child</div>
</body>
</html>