z-index order issue

Question

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>

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ — Jawad, Jul 25 '12 at 21:03
@Jawad Thanks. But I read that article, and I thought that the code example I posted meets all the conditions required for proper use of z-index. — Karl, Jul 25 '12 at 21:05

score 2 · Accepted Answer · answered Jul 25 '12 at 21:03

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.

answered Jul 25 '12 at 21:03

Catfish

18,876
54
209
353

Thanks, but the above article that Jawad quotes states "-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative." – Karl Jul 25 '12 at 21:07
Yes, but you're not setting a z-index on `.btn` – Catfish Jul 25 '12 at 21:17
1

also, you should just need to set the parent of #overlay to relative. So in this case you should set `body {position:relative;, z-index:1;}` and remove the `position:relative` and `z-index` from `#myTitle, .btn, and p`. – Catfish Jul 25 '12 at 21:20
thank you. Making the changes you suggested i.e. make the body position relative and remove z-index from other elements works in this particular case. So up voted. However, I posted is a very simple example and, if possible, I would like to utilize relative positioning. Either I have a bug, or the article is wrong. – Karl Jul 25 '12 at 21:37

score 1 · Answer 2 · answered Jul 25 '12 at 21:06

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.

answered Jul 25 '12 at 21:06

davy

4,474
10
48
71

Yes, changing #overLay to absolute position does cause z-index to work as expected. However, the referenced article says that should not be necessary. Is the article wrong, or does the code have a bug? +1. – Karl Jul 25 '12 at 21:12
1

I think the article might be wrong. This is how I've always seen it done. However, I'd be interested to see an example using relative positioning if anyone has one. – davy Jul 25 '12 at 21:15

score 0 · Answer 3 · answered Jul 25 '12 at 22:19

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.

z-index order issue

3 Answers3