1. Home
  2. Forums Index
  3. Browser Side / CSS 4:14 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

z-index positioning not working

         

krmkarlm

4:54 am on Mar 14, 2008 (gmt 0)

10+ Year Member



I have several div tags set to relative positioning and one with relative positioning with different z-index values, but i can not get the div i want on top (it is the one with the highest z-index value).

The style sheet looks like this:

.oneColFixCtr #container {
width: 780px; /* the auto margins (in conjunction with a width) center the page */
border: 0;
text-align: left;
top: 0px;
height: 560px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
padding-top: 0px;
left: 0px;
padding: 0;
margin-left: auto;

}
.oneColFixCtr #plateFrame {

height: 570px;
width: 780px;
top: 0px;
margin-top: 0px;
position: relative;
left: 0px;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
z-index: 250;
}

.oneColFixCtr #mainContent {
top: 0px;
padding-top: 0;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
margin-top: 50px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 2px;
position: absolute;
background-color: #FFFFFF;
left: 5px;
height: 510px;
border: 0;
visibility: visible;
z-index: 0;
}

The html is like this.

<body class="oneColFixCtr">

<div id="container">
<div id="plateFrame"><img src="images/background.png" />
<div id="mainContent">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #mainContent --></div>
<!-- end #plateFrame --></</div>
<!-- end #container --></div>
</body>

What am i missing? No matter what i do to the z-index i can not get the image to be on top!

Thanks in advance!

K

birdbrain

8:37 am on Mar 14, 2008 (gmt 0)



Hi there krmkarlm,

and a warm welcome to these forums. ;)

I have reworked your code for you and also added a little javascript so that you can see the effects of changing the z-index value. 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
 position:relative;
 width:780px; 
 margin:0 auto;
 }
#plateFrame {
 position:absolute;
 height:570px;
 z-index:1;
 }
#plateFrame img {
 height:570px;
 width:780px;
 }
#mainContent {
 position:absolute;
 width:706px;
 height:513px;
 padding:0 30px;
 margin:50px 7px 0 7px;
 background-color:#fff;
 z-index:0;
} 
#tester {
 cursor:pointer;
 }
</style>
<script type="text/javascript">
window.onload=function() {
 var obj1=document.getElementById('tester');
 var obj2=document.getElementById('mainContent');
 var test=true;
obj1.onclick=function(){
if(test==true){
 obj2.style.zIndex=2;
 obj1.firstChild.nodeValue='hide text';
 test=false;
 }
else {
 obj2.style.zIndex=0;
 obj1.firstChild.nodeValue='show text';
 test=true;
 }
 }
 }
</script>
</head>
<body>
<div id="container">
<div id="plateFrame"><img src="images/background.png" alt=""></div><!-- end #plateFrame -->
<div id="mainContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id,
 molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. 
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus 
venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse 
potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. 
In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, 
pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie 
id, varius et, nibh. Donec nec libero.
</p>
</div><!-- end #mainContent -->
</div><!-- end #container -->
<div id="tester">show text</div>
</body> 
</body>
</html>

I hope that this helps. ;)

birdbrain

krmkarlm

2:30 pm on Mar 14, 2008 (gmt 0)

10+ Year Member



Helps? That completely did the trick. I love the fact that your style code is much lighter. Since I couldn't get my image (framePlate) to overlay the mainContent div, i thought it might be a case of having to NOT let some characteristics values go unstated.

Can you tell me what, in short, I had wrong in my code that didn't let the z-indexes take effect? I thought i had all divs' positioning stated, etc. would love to learn from this, so i don't have to post in the future.

Thanks again for the fix and the warm welcome!
K

krmkarlm

4:06 pm on Mar 14, 2008 (gmt 0)

10+ Year Member



Another odd thing is that the plateFrame image which overlays the mainContent div prohibits any link i put in the mainContent div to be clickable. It's like the whole page is being "obscured" because of the framePlate image being "above" (higher z-index) than the mainContent div. Does the mainContnet div need to be the highest layer in order for links to be accessible?

Thanks in advance!

K

birdbrain

6:01 pm on Mar 14, 2008 (gmt 0)



Hi there krmkarlm,


Can you tell me what, in short, I had wrong in my code that didn't let the z-indexes take effect?

You needed to set the container to position:relative and the various contents to position:absolute.


Does the mainContnet div need to be the highest layer in order for links to be accessible?

The link is clickable in my code. ;) 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position:relative;
width:780px;
margin:0 auto;
}
#plateFrame {
position:absolute;
width:780px;
height:570px;
z-index:1;
background-color:#000;
}
#plateFrame img {
height:570px;
width:780px;
}
#mainContent {
position:absolute;
width:706px;
height:513px;
padding:0 30px;
margin:50px 7px 0 7px;
background-color:#fff;
z-index:0;
}
#mainContent a {
color:#900;
font-size:18px;
 }
#tester {
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function() {
var obj1=document.getElementById('tester');
var obj2=document.getElementById('mainContent');
var test=true;
obj1.onclick=function(){
if(test==true){
obj2.style.zIndex=2;
obj1.firstChild.nodeValue='hide text';
test=false;
}
else {
obj2.style.zIndex=0;
obj1.firstChild.nodeValue='show text';
test=true;
}
}
}
</script>
</head>
<body>
<div id="container">
<div id="plateFrame"><img src="images/background.png" alt=""></div><!-- end #plateFrame -->
<div id="mainContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id,
molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse
potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero.
In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie
id, varius et, nibh. Donec nec libero.
</p>
<a href="http://www.webmasterworld.com/css/3600262.htm">http://www.example.com</a>
</div><!-- end #mainContent -->
</div><!-- end #container -->
<div id="tester">show text</div>
</body>
</body>
</html>

birdbrain

[edited by: SuzyUK at 3:30 pm (utc) on Mar. 15, 2008]
[edit reason] minimised sidescroll [/edit]

krmkarlm

6:20 pm on Mar 14, 2008 (gmt 0)

10+ Year Member



That's interesting! In my browser the link to the forum that exists in the mainContent div is not clickable unless the mainContent div is "on top." When it is behind the plateFrame the link is not available to be clicked. Must be because the plateFrame image is one whole image and is not cut into pieces?

birdbrain

6:44 pm on Mar 14, 2008 (gmt 0)



Hi there krmkarlm,

of course the #mainContent has to be on top to be clickable.
When it is not on top how can you see the link?

birdbrain

krmkarlm

9:48 pm on Mar 14, 2008 (gmt 0)

10+ Year Member



ah...my bad. The image in #plateFrame is a .png that covers the whole area, but whose center is transparent. This .png is a highly customize frame with a drop shadow that should basically outline the whole #mainContent div, but give access to the content in the center. I am slowly realizing that this is probably not thw ay to do this? I am guessing that I will need to break that .png into sections and piece together so that access to links in the center is possible.

birdbrain

7:03 am on Mar 15, 2008 (gmt 0)



Hi there krmkarlm,

have a look at this reworked code, it may suit your requirements... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position:relative;
width:780px;
margin:0 auto;
}
#plateFrame {
position:absolute;
width:780px;
height:570px;
z-index:1;
background-image:url(images/background.png);
}
#plateFrame a {
color:#900;
font-size:18px;
display:block;
margin:300px 0 0 37px;
}
#mainContent {
position:absolute;
width:706px;
height:513px;
padding:0 30px;
margin:50px 7px 0 7px;
background-color:#fff;
z-index:0;
}
</style>
</head>
<body>
<div id="container">
<div id="plateFrame">
<a href="#">http://www.webmasterworld.com/css/3600262.htm</a>
</div>
<div id="mainContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id,
molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse
potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero.
In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie
id, varius et, nibh. Donec nec libero.
</p>
</div>
</div>
</body>
</html>

birdbrain

[edited by: SuzyUK at 3:31 pm (utc) on Mar. 15, 2008]
[edit reason] minimised sidescroll [/edit]

krmkarlm

3:28 pm on Mar 15, 2008 (gmt 0)

10+ Year Member



Amazing. I've worked for years in Photoshop, html, asp, etc. but the concept of "layers" via divs still eludes me to some extent. The solution you present is excellent. Thanks!

birdbrain

4:26 pm on Mar 15, 2008 (gmt 0)



No problem, you're very welcome. ;)

birdbrain

4:47 pm on Mar 15, 2008 (gmt 0)



Hi there krmkarlm,

now that I have had a glimpse of your image, your code can now be further simplified... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
 width:720px;
 height:440px;
 padding:130px 30px 0;
 margin:0 auto;
 background-image:url(background.png);
 }
#container p {
 font-family:verdana,arial,helvetica,sans-serif;
 font-size:16px;
 text-align:justify;
 }
#container a {
  color:#be1e2d;
 }
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id,
molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse
potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero.
In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie
id, varius et, nibh. Donec nec libero.
</p>
<ul>
<li><a href="#">http://www.webmasterworld.com/css/3600262.htm</a></li>
</ul>
</div>
</body>
</html>

krmkarlm

4:06 pm on Mar 16, 2008 (gmt 0)

10+ Year Member



LOL...wow. Amazing really. No z-indexes at all. And not much code to boot! I can see that since the container just has a background img no z-indexes are required. But if i want to over lay menu options over the red bar at the top, then positioning would need to be stated for #container and the menu choices above the #container. Correct?

I can get really close to what i need with this method, but still won't be able to have the images that would be in #container slip behind the frame. It's almost like i have to do several divs with different z-indexes to achieve this, but overall it appears that what the designer gave me (that sample image) isn't fully possible. is this a correct assessment?

Thanks again!

birdbrain

5:05 pm on Mar 16, 2008 (gmt 0)



Hi there krmkarlm,

if you are considering...


having images slip behind the frame

...then you will need to go with the relatively positioned container and the absolutely positioned contents method.

birdbrain

krmkarlm

5:18 pm on Mar 16, 2008 (gmt 0)

10+ Year Member



thanks again so much! I think I'm close, but every time i change it whacks out. ha!
K

birdbrain

5:45 pm on Mar 16, 2008 (gmt 0)



Hi there krmkarlm,

does this help... 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
position:relative;
width:780px;
margin:0 auto;
}
#plateFrame {
position:absolute;
width:780px;
height:570px;
z-index:1;
background-image:url(images/background.png);
}
#plateFrame a {
color:#900;
font-size:18px;
display:block;
margin:340px 0 0 37px;
}
#mainContent {
position:absolute;
width:706px;
height:513px;
padding:0 30px;
margin:110px 7px 0 7px;
background-color:#fff;
z-index:0;
}
#logo {
 margin-top:40px;
 margin-left:-40px;
 }
#logo1{
 margin-left:630px;
 }
</style>
</head>
<body>
<div id="container">
<div id="plateFrame">
<a href="#">http://www.webmasterworld.com/css/3600262.htm</a>
</div>
<div id="mainContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id,
molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse
potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero.
In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie
id, varius et, nibh. Donec nec libero.
</p>
<img id="logo" src="http://www.searchengineworld.com/gfx/logo.png" alt="">
<img id="logo1" src="http://www.searchengineworld.com/gfx/logo.png" alt="">
</div>
</div>
</body>
</html>

birbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:14 am May 2, 2026