z-index訂單問題

爲什麼下面的Z-INDEX訂單不起作用？z-index訂單問題

我想要的是DIV標籤覆蓋H1和P標籤。相反，當DIV的innerHTML被初始化時，其他標籤向下移動頁面。如您所見，頁面上的所有元素都已定位，並且DIV具有更高的Z-INDEX。我還有什麼遺漏？（HTML和CSS驗證）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>z-index test</title> 
    <style type="text/css"> 
     @media screen { 
      #myTitle {position: relative; margin-top:20px; margin-left:20px; z-index:1;} 
      #overLay {position: relative; margin-top:20px; margin-left:20px; z-index:999;} 
      .btn {position: relative; margin-left:20px;} 
      p {position: relative; margin-left:20px; z-index:1;} 
     } 
    </style> 
</head> 
<body> 
<div id="overLay"></div> 
<h1 id="myTitle">An H1 Header</h1> 
<p>A paragraph....</p> 
<p>And another paragraph....</p> 
<button class="btn" onclick="on_Clear();">clear div element</button> 
<button class="btn" onclick="on_Init();">init div element</button> 
<script type="text/javascript"> 
<!-- 
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast."; 
function on_Clear() {document.getElementById("overLay").innerHTML = "";} 
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";} 
//--> 
</script> 
</body> 
</html>

來源

2012-07-25 Karl

你有沒有看過你的堆放環境？ – Jawad 2012-07-25 21:03:04

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ – Jawad 2012-07-25 21:03:50

@Jawad謝謝。但是我讀過那篇文章，並且我認爲我發佈的代碼示例滿足了正確使用z-index所需的所有條件。 – Karl 2012-07-25 21:05:33

如果你想要的元素疊加上你將不得不使用沿z索引與 position: absolute;或使用負利潤率/填充其他元素之上

。

你也不應該把position:relative;放在你的CSS的所有東西。

來源

2012-07-25 21:03:28 Catfish

謝謝，但Jawad引用的上述文章指出「-index只對位置屬性已明確設置爲絕對，固定或相對的元素起作用。」 – Karl 2012-07-25 21:07:47

是的，但您還沒有在'.btn' – Catfish 2012-07-25 21:17:15

上設置z-index，您應該只需要將#overlay的父項設置爲相對。因此，在這種情況下，您應該設置'body {position：relative; z-index：1;}'並從#myTitle，.btn和p中移除'position：relative'和'z-index'。 – Catfish 2012-07-25 21:20:26

嘗試相對容器（div）內的絕對定位。這將使元素在正常文檔流之外，並且z-index應該起作用。

另外，從相關元素中刪除z-idnex。

來源

2012-07-25 21:06:13 davy

是的，將#overLay更改爲絕對位置確實會導致z-index按預期工作。然而，引用的文章說，這不應該是必要的。文章是錯誤的，還是代碼有bug？ +1。 – Karl 2012-07-25 21:12:54

我認爲這篇文章可能是錯誤的。這是我總是看到它完成的。不過，如果有人使用相對定位，我會很有興趣看到一個例子。 – davy 2012-07-25 21:15:53

這可能有所幫助：http://stackoverflow.com/questions/5627507/relative-z-index – davy 2012-07-25 21:17:34

以下按預期工作。我根據@Catfish評論之一進行了更改。

請注意，我在overLay DIV周圍添加了一個包裝DIV。包裝器不需要包含頁面上的任何其他元素，並且可以相對定位。它的z-index被設置爲1。它包含絕對定位的overLay DIV，但有用的（我認爲）是#overLay並不需要設置任何位置屬性。所以，情感上，它還是比較有定位的。最後，定位和z-index樣式從所有其他元素中移除。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>z-index test</title> 
<style type="text/css"> 
    @media screen { 
    #wrapper {position: relative; margin-top:20px; margin-left:20px; z-index:1;} 
    #overLay {position: absolute; z-index:999; background-color:#fff;} 
    #myTitle {margin-top:20px; margin-left:20px;} 
    .btn {margin-left:20px;} 
    p {margin-left:20px;} 
    } 
</style> 
</head> 
<body> 
    <div id="wrapper"><div id="overLay"></div></div> 
    <h1 id="myTitle">An H1 Header</h1> 
    <p>A paragraph....</p> 
    <p>And another paragraph....</p> 
    <button class="btn" onclick="on_Clear();">clear div element</button> 
    <button class="btn" onclick="on_Init();">init div element</button> 

<script type="text/javascript"> 
<!-- 
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast."; 
function on_Clear() {document.getElementById("overLay").innerHTML = "";} 
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";} 
//--> 
</script> 
</body> 
</html>

現在，我們來看看它是否適用於真實頁面。

來源

2012-07-25 22:19:51 Karl

z-index訂單問題

回答

相關問題