1

Why doesn't the below Z-INDEX order work?

What I want is the DIV tag to overlay the H1 and P tags. Instead, when the DIV's innerHTML is initialized, the other tags shift down the page. As you can see, all elements on the page are positioned and the DIV has a higher Z-INDEX. What else am I missing? (both the HTML and CSS validate)

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

3 回答 3

2

if you want elements to overlay on top of other elements you're going to have to use z-index along with position: absolute; or use negative margins/padding.

You also shouldn't need to put position:relative; on everything in your css.

于 2012-07-25T21:03:28.757 回答
1

Try absolute positioning inside a relative container (div). This takes the element outside the normal document flow and z-index should work.

Also,remove the z-idnex from the relative elements.

于 2012-07-25T21:06:13.480 回答
0

The below works as expected. I made the changes based on one of @Catfish comments.

Note, I added one wrapper DIV around the overLay DIV. The wrapper does not need to contain any of the other elments on the page and it can be relatively positioned. Its z-index is set to one. It contains the overLay DIV which is absolutely positioned, but what is useful (I think) is #overLay does not need to have any position attributes set. So, affectively, it is still relatively positioned. Finally, the positioning and z-index styling was removed from all other elements.

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

Now, let's see if this works on a real page.

于 2012-07-25T22:19:51.467 回答