CSS z-index不能使用相对定位 [英] CSS z-index not working with relative positioning
本文介绍了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不能使用相对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
