文章/答案/技术大牛

发布

社区首页 >问答首页 >Z-索引顺序问题

问Z-索引顺序问题
EN

Stack Overflow用户

提问于 2012-07-26 05:00:23

回答 3查看 1.1K关注 0票数 1

为什么下面的Z索引顺序不起作用？

我想要的是DIV标签来覆盖H1和P标签。相反，当DIV的innerHTML被初始化时，其他标签就会在页面上向下移动。如您所见，页面上的所有元素都已定位，并且DIV具有更高的Z索引。我还漏掉了什么？( 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>

css

z-index

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-07-26 05:03:29

如果您希望元素覆盖在其他元素之上，则必须使用z索引和position: absolute;，或者使用负边距/填充。

你也不应该把position:relative;放在你的css中的所有东西上。

票数 2

Stack Overflow用户

发布于 2012-07-26 05:06:13

尝试在相对容器(div)中进行绝对定位。这会将元素放在正常的文档流之外，z-index应该可以工作。

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

票数 1

Stack Overflow用户

发布于 2012-07-26 06:19:51

下面的代码按照预期工作。我根据@Catfish的一条评论做了修改。

注意，我在overLay DIV周围添加了一个包装器DIV。包装器不需要包含页面上的任何其他元素，并且可以相对定位。它的z-index设置为1。它包含overLay DIV，这是绝对定位的，但有用的(我认为)是#overLay不需要设置任何位置属性。因此，从情感上讲，它仍然是相对定位的。最后，定位和z索引样式从所有其他元素中删除。

<!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>

现在，让我们看看这在一个真实的页面上是否有效。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11658556

复制

相似问题

问Z-索引顺序问题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Z-索引顺序问题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Z-索引顺序问题
EN