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不與相對定位

回答

相關問題