z-index NOT working :(

Guys I creating a layout with several different pictures. but when I put them on the site they stack on top of each other. They should be in their respective places on the layout.

Instead when I load them, they bunch up in the middle one of top of the other.
I tried using the z-index(see code below) but I can't get it to work.

Here's my code:

<html>
<head><TITLE>This is the Title</TITLE></head>
<style type="text/css">
 body {
 text-align: center;
}

#container {
 margin: 0 auto;
 width: 1024px;
}

#toppage {
 position: relative;
 top: 0px;
 left: 0px;
 z-index: 10;
}

#picture {
 position: relative;
 top: 30px;
 left: 0px;
 z-index: 20;
}

#nextpicture {
 position: relative;
 top: 0px;
 left: 325px;
 z-index: 30;
}
</style>

<div id="container">

<body bgcolor="white">

<div id='toppage'><p align="center"><img src="headerpicture"</p></div>

<div id='picture'><p align="center"><img src="picture1"/></p></div>

<div id='nextpicture'><p><img src="picture2"/></p></div>

</body>
</div>
</html>

2

Contributors

5

Replies

1 Day

Discussion Span

1 Year Ago

Last Updated

6

Views

HoneyBadger

Junior Poster in Training

78 posts since Oct 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

well guys I KINDA got it to work....

everything is in it's proper place. but I had to use negative numbers in the z-index.
Which in tuns means I have huge scroll bars for empty space.

why did adding negative z-index cause large empty spaces to appear?

Here's my new code:

<html>
    <head><TITLE>This is the Title</TITLE></head>
    <style type="text/css">
    body {
    text-align: center;
    }
     
    #container {
    margin: 0 auto;
    width: 1024px;
    }
     
    #toppage {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 10;
    }
     
    #picture {
    top: 30px;
    left: 0px;
    position: relative;
    z-index: 20;
    }
     
    #nextpicture {
    top: -383px;
    left: 44px;
    position: relative;
    z-index: 30;;
    }
    
    #thirdtpicture {
    top: -678px;
    left: 742px;
    position: relative;
    z-index: 40;
    }
    </style>
     
    <div id="container">
     
    <body bgcolor="white">
     
    <div id='toppage'><p align="center"><img src="headerpicture"</p></div>
     
    <div id='picture'><p align="center"><img src="picture1"/></p></div>
     
    <div id='nextpicture'><p><img src="picture2"/></p></div>
   
    <div id='thirdpicture'><p><img src="picture3"/></p></div>
     
    </body>
    </div>
    </html>

HoneyBadger

Junior Poster in Training

78 posts since Oct 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

anyone?

HoneyBadger

Junior Poster in Training

78 posts since Oct 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

What browsers have you tried? IE tends to have similar problems with z-index. If the problem occurs in other browsers I am not positive what the cause would be.

weekendrockstar

Junior Poster in Training

71 posts since Dec 2010

Reputation Points: 25

Solved Threads: 16

Skill Endorsements: 0

1 Year Ago

0

I was using Firefox, I used Firefox both inside my Linux virtual machine and my Windows host, and it had these same huge scroll bars on the side and bottom.

HoneyBadger

Junior Poster in Training

78 posts since Oct 2010

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

Hmm I'm not positive why you'd have this problem however one slight thing I noticed is that your css for the thirdpicture div has an extra 't' in the class definition "thirdtpicture". Not sure that that would fix any problem but it could cause at least a bit of a problem for that div because it's not actually being affected by css. And there's an extra semicolon at the end of nextpicture. Again, not sure that'll fix anything but it could still be taken out. If those do not fix anything then let us know and I'll keep trying to think of something.

weekendrockstar

Junior Poster in Training

71 posts since Dec 2010

Reputation Points: 25

Solved Threads: 16

Skill Endorsements: 0

z-index NOT working :(

This article has been dead for over three months: Start a new discussion instead