Z-Index Layers Shift by 5 Pixels

regkaz · 16th March 12, 12:55 PM

I'm used to designing webs with automated programs like Frontpage and Expression Web 4. My CSS is sloppy so I'm trying to teach myself from scratch. I thought I was understanding z-index when I encountered a non-IE 6 bug that left me at a loss. I tried Google for an answer but after two days of searching I thought it better to ask some experts.

Here's the problem. I created a div that contained two layer divs. I set the two layers to different z-indexes and made them relative positioned. Each layer held a 500 X 500 px image.

My logic is that one layer should perfectly cover the other. What I've found is that the lower layer is shifted exactly 5 pixels lower than the top layer.

See it here: http://www.ewccontrols.com/test/

You can see the woods picture sticks out below the dogs legs.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
#stacker1 {
position: relative;
z-index: 3;
}
#stacker2 {
position: relative;
z-index: 2;
top: -500px;
left: 0px;
}
#downer {
top: 60px;
position: relative;
left: 25px;
background-color: #FFFF00;
width: 500px;
height: 500px;
}
</style>
</head>

<body>

<div id="downer">

<div id="stacker1"><img alt="Dog" src="Images/dog.jpg"></div>

<div id="stacker2"><img alt="Woods" src="Images/woods.jpg"></div>

</div>

</body>

</html>

Why the pixel shift?

chrishirst · 16th March 12, 01:05 PM

No idea, we need to see the code in situ as we don't have the images to be able to recreate the page.

But you do know that relative positioning does not move the actual element, only where it displays and the element still takes up its natural space in the flow.

csswizard · 16th March 12, 01:19 PM

Its easy. Give both of your DIV exact height and set all the tags properties padding and margin to 0 and it will work. It is due to the unnecessary padding and margin issue i guess.

Assigning fixed height with the DIVs will work.

csswizard · 16th March 12, 01:21 PM

Its easy. Give both of your DIV exact height and set all the tags properties padding and margin to 0 and it will work. It is due to the unnecessary padding and margin issue i guess.

Assigning fixed height with the DIVs will work.

regkaz · 16th March 12, 01:35 PM

Yes, I made a copy of the page where the only change was assigning a height to both layers and now it displays properly. Thank you.

16th March 12, 12:55 PM	#1
regkaz WLC Member Join Date: Mar 2012 Posts: 2	Z-Index Layers Shift by 5 Pixels I'm used to designing webs with automated programs like Frontpage and Expression Web 4. My CSS is sloppy so I'm trying to teach myself from scratch. I thought I was understanding z-index when I encountered a non-IE 6 bug that left me at a loss. I tried Google for an answer but after two days of searching I thought it better to ask some experts. Here's the problem. I created a div that contained two layer divs. I set the two layers to different z-indexes and made them relative positioned. Each layer held a 500 X 500 px image. My logic is that one layer should perfectly cover the other. What I've found is that the lower layer is shifted exactly 5 pixels lower than the top layer. See it here: http://www.ewccontrols.com/test/ You can see the woods picture sticks out below the dogs legs. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <style type="text/css"> #stacker1 { position: relative; z-index: 3; } #stacker2 { position: relative; z-index: 2; top: -500px; left: 0px; } #downer { top: 60px; position: relative; left: 25px; background-color: #FFFF00; width: 500px; height: 500px; } </style> </head> <body> <div id="downer"> <div id="stacker1"><img alt="Dog" src="Images/dog.jpg"></div> <div id="stacker2"><img alt="Woods" src="Images/woods.jpg"></div> </div> </body> </html> Why the pixel shift?

16th March 12, 01:05 PM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Z-Index Layers Shift by 5 Pixels No idea, we need to see the code in situ as we don't have the images to be able to recreate the page. But you do know that relative positioning does not move the actual element, only where it displays and the element still takes up its natural space in the flow.

16th March 12, 01:19 PM	#3
csswizard WLC Member Join Date: Mar 2012 Posts: 17	Re: Z-Index Layers Shift by 5 Pixels Its easy. Give both of your DIV exact height and set all the tags properties padding and margin to 0 and it will work. It is due to the unnecessary padding and margin issue i guess. Assigning fixed height with the DIVs will work.

16th March 12, 01:21 PM	#4
csswizard WLC Member Join Date: Mar 2012 Posts: 17	Re: Z-Index Layers Shift by 5 Pixels Its easy. Give both of your DIV exact height and set all the tags properties padding and margin to 0 and it will work. It is due to the unnecessary padding and margin issue i guess. Assigning fixed height with the DIVs will work.

16th March 12, 01:35 PM	#5
regkaz WLC Member Join Date: Mar 2012 Posts: 2	Re: Z-Index Layers Shift by 5 Pixels Yes, I made a copy of the page where the only change was assigning a height to both layers and now it displays properly. Thank you.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode