CSS的z-index不与相对定位

工作，我有像这样一些div：CSS的z-index不与相对定位

<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 (stacked over) #two (stacked over) #three，但我得到的是#one (before) #two (before) #three只是因为它们将出现不施加任何的z-index。我怎样才能使我的Z指数工作，更重要的是为什么我的代码不工作？

来源

2016-02-24 Vijay Singh

你'div's是'的位置是：相对的;'但你不他们不会将它们移动到任何地方，所以它们就像通常一样渲染。你需要用'top'和'left'移动它们，或者将它们放在容器内。 – Quantastical

可能重复[如何使用z-index与相对定位？]（http://stackoverflow.com/questions/8986071/how-to-use-z-index-with-relative-positioning） – Matthijs

@Mathhijs：我看到了问题，但在那里，位置：相对于两个div在相同堆栈级别IMO。我认为我的情况更容易解决！ –

您必须使用top和left属性。看看这个解决方案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>

来源

2016-02-24 20:12:23 misabelcarde

您不必使用top和left属性 - 它不会解决问题。 –

下面是一个使用工作示例 “绝对” 的定位：https://jsfiddle.net/x32m5rhv/1

<div> 
 
\t \t <div id="myBox" style="border: 1px solid #000; width: 100px; height: 100px; z-index: 4; position: absolute; background-color: #ff0000; opacity:0.8">myBox z-index 4</div> 
 
\t \t <div style="width:100px;height:100px;position:absolute;background-color:yellow;top:20px;left:20px;z-index:0;opacity:0.5;border:1px solid #333333;">z-index 0</div> 
 
\t \t <div style="width:100px;height:100px;position:absolute;background-color:yellow;top:40px;left:40px;z-index:1;opacity:0.5;border:1px solid #333333;">z-index 1</div> 
 
\t \t <div style="width:100px;height:100px;position:absolute;background-color:yellow;top:60px;left:60px;z-index:2;opacity:0.5;border:1px solid #333333;">z-index 2</div> 
 
\t \t <div style="width:100px;height:100px;position:absolute;background-color:yellow;top:80px;left:80px;z-index:3;opacity:0.5;border:1px solid #333333;">z-index 3</div> 
 
</div>

来源

2016-02-24 20:23:31

CSS的z-index不与相对定位

回答

相关问题