定位3周的div用z-index

<body> 
<div id="red" class="colorbox"><p>RED</p> 
    <div id="green" class="colorbox"><p>GREEN </p> 
    <div id="blue" class="colorbox"><p>BLUE</p> 
    </div> 
    </div> 
</div> 
</body>

我怎樣才能將其定位是這樣的：定位3周的div用z-index

紅色塊被放置在Z軸的另外兩個之間;
綠塊放在紅塊後面;
藍塊位於紅塊前方。

是這樣的：

#red { z-index: 2; } 
#green { z-index: 1 } 
#blue { z-index: 3 }

進展不相稱的感謝！

更新：

這裏是我的代碼：http://jsbin.com/ihizot/3/edit

來源

2013-01-14 dimiork

添加位置：相對;到每個，那麼z-索引值將工作。 – gotohales

不那麼簡單@mookamafoob - 看我的回答 –

@PaulSullivan大聲笑這就是爲什麼它是一個評論，而不是一個答案。這是一個出發點：P – gotohales

很簡單，你不能做到這一點，並100％支持跨瀏覽器（見mookamafoob使用psuedo元素的答案：後重新創建紅色框（不支持< IE8））。

由於紅色和藍色div包含在綠色中，因此無法在其上方推動紅色的堆疊上下文。

我已經創建了一個簡單的fiddle什麼是z-index和css所需的堆棧，因爲你需要但因爲你的標記嵌套'不正確'紅色不能推動綠色和藍色之間div的。

#red { 
    position:absolute; 
    z-index:2; 
    top:15px; 
    left:15px; 
    height:100px; 
    width:100px; 
    background-color:red 
} 
#green 
{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    z-index:1; 
    height:100px; 
    width:100px; 
    background-color:green; 
} 
#blue 
{ 
    position:absolute; 
    z-index:3; 
    top:30px; 
    left:30px; 
    height:100px; 
    width:100px; 
    background-color:blue; 
}

不可能的，因爲據我所知，我敢肯定有人會用爲什麼發生這種情況在瀏覽器渲染引擎正確的術語（人？）

來源

2013-01-14 22:05:36

非常感謝你！ – dimiork

我會盡力找到@dimiork的確切原因，但是（從我的經驗）我只知道這是在css中渲染引擎的工作方式我相信如果你在谷歌裏研究'css stacking context'，你可能會收集到更多關於這個主題的信息，並且沒有問題總是樂於幫助:) –

不要放棄這麼容易！看到我的回答:) – gotohales

Z-Index的工作，你需要設置每一元素的位置：

的位置是：絕對的，位置：相對的，或位置是：固定

實施例：

<div id="green" class="colorbox"><p>RED</p> 
    <div id="red" class="colorbox"><p>GREEN </p> 
    <div id="blue" class="colorbox"><p>BLUE</p> 
    </div> 
    </div> 
</div> 

.colorbox { 
    position:relative; 
    height:50px; 
    width:50px; 

} 
#red { 
    background:red; 
    z-index: 2; 
} 
#green { 
    z-index: 1; 
    background: green; 
} 
#blue { 
    z-index: 3; 
    background:blue; 
}

來源

2013-01-14 21:52:33

對不起，不是這麼簡單:( 這是我的代碼 - http://jsbin.com/ihizot/3/edit – dimiork

是的，它不是像答案狀態那麼簡單。由於標記結構，你不能打破綠色div上方的紅色div（請參閱我的答案和小提琴例如 –

而不是用z-index是搞亂它不可能改變標記？

<div id="green" class="colorbox"><p>GREEN </p> 
    <div id="red" class="colorbox"><p>RED</p> 
     <div id="blue" class="colorbox"><p>BLUE</p> 
     </div> 
    </div> 
</div>

來源

2013-01-14 22:06:49 dfunkydog

這不是問題 - 我確信他可以輕鬆地切換標籤的ID，但OP詢問是否可以根據問題中定義的結構進行佈局（我相信它是不可能由於堆疊情況） –

問題是在這種形式的學術興趣，這是目前夥計們，你今天節省了我的睡眠:) – dimiork

從技術上講，它實際上是可能使用CSS僞元素，它在大多數瀏覽器。如果你重新創建具有下列「紅色」框：

#red:after { 
background-color: #f00; 
top: -5px; 
left: -5px; 
z-index: 2; 
position: absolute; 
font-weight: bold; 
width: 400px; 
height: 400px; 
border: 5px solid white; 
font-size: 70pt; 
content:"RED";

}

，並做一些其他的調整，你會得到this例如其中位於其他兩間。它可能不是最優雅的解決方案，但它適用於您提供的場景。

來源

2013-01-15 00:10:10 gotohales

除

@PaulSullivan這是真的，但一旦你有了z-index的任何有趣的東西，你基本上扔IE7出窗口:) – gotohales

定位3周的div用z-index

回答

相關問題