什麼正確使用的z-index

是有辦法，我可以使格「分節」 overstack上格「紅」的文本？我一直在尋找幾個小時，但我似乎無法找到答案。我正在使用z-index，但沒有任何工作。我確定我錯過了一些東西。什麼正確使用的z-index

*{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
html, body{ 
 
\t height: 100%; 
 
} 
 

 
.sectOne{ 
 
\t height: 100%; 
 
\t background-image: url(images/idea.jpg); 
 
} 
 

 
.red{ 
 
\t font-size: 100px; 
 
\t position: fixed; 
 
\t z-index: 100; 
 
} 
 

 
.subSect{ 
 
\t height: 70%; 
 
\t position: relative; 
 
\t z-index: 50; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Parallax</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="red"> 
 
\t <p>sample</p> 
 
</div> 
 

 
<div class="sect sectOne"></div> 
 

 
<div class="subSect"></div> 
 

 
<div style="height: 1000px"></div> 
 

 

 
</body> 
 
</html>

來源

2017-01-13 Ian Josef

您的.subSect中的z-index低於.red，這就是這種情況。 –

您z-index在.subSect是比。 red，如果我理解正確，你不希望能夠在.red選擇文本，因此對於設置了負z-index

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
.sectOne { 
 
    height: 100%; 
 
    background-image: url(http://lorempixel.com/900/900); 
 
} 
 
.red { 
 
    font-size: 100px; 
 
    position: fixed; 
 
    z-index: -1; 
 
} 
 
.subSect { 
 
    height: 70%; 
 
    position: relative; 
 
    z-index: 2; 
 
    background: rgba(0,0,0,.5) 
 
}

<div class="red"> 
 
    <p>sample</p> 
 
    </div> 
 

 
    <div class="sect sectOne"></div> 
 

 
    <div class="subSect">asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd </div> 
 

 
    <div style="height: 1000px"></div>

來源

2017-01-13 15:44:10 dippas

頭號規則有關z-index是，一旦你從他們開始，你會最終使用很多。

這主要是因爲web開發人員不完全瞭解背後的機制，尤其是堆疊上下文的概念。

一個堆疊內容是其中z-index執行其行爲的容器，z-index永遠不會打破其堆疊內容的，但你可以影響的堆疊內容當然本身z排序。

從the MDN article on stacking contexts，這是究竟是什麼產生了堆疊內容，他們中的一些是已知的大多數的Web開發人員（例如position: absolute）彙總，而有些則沒有（例如opacity: 0.999）。

定位和分配的z索引值到一個HTML元素創建一個堆疊上下文，（一樣分配非全不透明度）。
堆疊內容可以包含在其它堆疊內容，並共創堆疊內容的層次結構。
每個堆疊上下文都完全獨立於其兄弟：只有在處理堆棧時才考慮後代元素。
每個堆疊上下文都是獨立的：在堆疊元素的內容之後，整個元素被視爲父堆疊上下文的堆疊順序。

在您的例子，在對預期的Z排序播放的強大之處在於您要影響的元素都是相同的堆疊環境內（<html>是首要堆疊內容，總是那裏）和z指數或.red（z-index: 100）和.sectOne（z-index: 50）都是錯誤的順序。實際上，如果你完全放棄了干預z-index，那麼HTML語法本身的「自然順序」本身就不僅僅是願意做你想要的東西，而是顯示.sectOne的內容在固定位置.red。

.red { 
    font-size: 100px; 
    position: fixed; 
} 

.subSect { 
    height: 70%; 
    position: relative; 
    /* provide some coloring to see what is going on */ 
    background-color: #ff0; 
}

A working fiddle來證明這一點。

所有我做了什麼提供了一些視覺輔助，以表明 - 的確 - .sectOne已超過.red。

對於這個問題，可以從這個問題推導出給定的HTML以及你開始篡改z-index的事實，你希望在固定元素之下和之上有幾塊內容，爲此，它應該足以提供一些堆放上下文觸發器上的頂部元素，而不是應該通過下面的元素。

A working fiddle to demonstrate this。

來源

2017-01-14 10:19:59

什麼正確使用的z-index

回答

相關問題