Html CSS z索引不适用于相对定位_Html_Css_Z Index

Html CSS z索引不适用于相对定位

html css

Html CSS z索引不适用于相对定位,html,css,z-index,Html,Css,Z Index,我有一些类似的div： <html> <body> <div id="out"> <div id="in"> <div id="one" style="position: relative; z-index: 3"> </div> <div id="two" style="position: relative

我有一些类似的div：

<html>
<body>
<div id="out">
        <div id="in">
                <div id="one" style="position: relative; z-index: 3">
                </div>
                <div id="two" style="position: relative; z-index: 2">
                </div>
                <canvas id="three" style="position: relative; z-index: 1">
                </canvas>
                <canvas id="four" class="hidden">
                </canvas>
        </div>

        <-- Some more divs with position: static (default)-->


</div>
</body>
</html>

我想要

#一（叠加）#二（叠加）#三

，但我得到的只是

#一（之前）#二（之前）#三

，就像它们在不应用任何z索引的情况下出现一样。我如何才能使我的z索引工作，更重要的是为什么我的代码不工作

您必须使用

top

和

left

属性。看看这个解决方案


第一组
第二组
第三组

下面是一个使用“绝对”定位的工作示例：


myBox z-index 4
z指数0
z指数1
z指数2
z指数3

您的

div

s是

位置：相对但您不会将它们移动到任何位置，因此它们会像正常情况下一样进行渲染。您需要使用top
和left
移动它们，或者将它们完全放置在容器中。可能重复@mathijs:I看到了这个问题，但是在那里，position:relative在同一堆栈级别上有两个div。我假设我的情况更容易解决@Quantastical：当我绝对定位div#1、#2、#3
时，它们会移动到#内
外的所有其他div上，这会破坏布局！我想要的是#in中的div来形成一个堆栈，布局的其余部分保持原样。您不必使用top和left属性-这不会解决问题。
<div id="out">
    <div id="in">
    <div id="one" style="position: relative; z-index: 3; background-color:orange; top: 3.5em;">div one
    </div>
    <div id="two" style="position: relative; z-index: 2;  background-color: yellow; top:3em;">div two
    </div>
    <canvas id="three" style="position: relative; z-index: 1;  background-color:pink;">div three
    </canvas>
    <canvas id="four" class="hidden">
    </canvas>
    </div>
</div>