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订单问题

回答

相关问题