Question

为什么下面的Z-INDEX订单不起作用？

我想要的是覆盖H1和P标签的DIV标签。相反，当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>

Answer 1

如果您希望元素叠加在其他元素之上，则必须使用z-index和position: absolute;或使用负边距/填充。

您也不需要将position:relative;放在CSS中的所有内容中。

Answer 2

尝试在相对容器（div）中进行绝对定位。这会使元素超出正常的文档流程，并且z-index应该可以工作。

此外，从相关元素中删除z-idnex。

Answer 3

以下按预期工作。我根据@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>

现在，让我们看看这是否适用于真实页面。

z-index订单问题

3 个答案: