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