CSS z-index不能使用相对定位

问题描述：

我有一些div像这样：

I have some divs like so:

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

我想要 #one（堆叠）#two三个，但是我得到的是 #one（before）#two（before）#three 。如何使我的z索引工作，更重要的是为什么我的代码不工作？

I want #one (stacked over) #two (stacked over) #three but all I get is #one (before) #two (before) #three just as they would appear without applying and any z-index. How can I make my z-indices work, and more importantly why is my code not working?

答

您必须使用 top 和左属性。查看此解决方案 https://jsfiddle.net/f5L4puaa/

You have to use top and left attributes. Look at this solution https://jsfiddle.net/f5L4puaa/

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

CSS z-index不能使用相对定位

相关推荐