All the Z-index tells the browser is which layer to place on top if two layers overlap. It will not magically place a layer where you want it on the layout.
You still have to position it correctly, then add the z-index to the layers in the order of priority.
Last edited by kwdamp; 07-11-2011 at 11:35 PM..
Reason: spelling
All the Z-index tells the browser is which layer to place on top if two layers overlap. It will not magically place a layer where you want it on the layout.
You still have to position it correctly, then add the z-index to the layers in the order of priority.
I guess I'm not seeing what the problem is then. Can you tell (or show) specifically what you are trying to do that isn't working correctly?
Sure, as you can see the left panel is far below the logo. I would like the left panel to line up with the center panel without changing the position of the panel it's self. I hope that makes sense.
Actually, it's the center panel that is located far below the logo. The div in the center of your page is actually the leftpanel. On another note, is there a point to having a wrapper div within a div that is already wrapping? A wrapper with a greater width than its parent, nonetheless.
Actually, it's the center panel that is located far below the logo. The div in the center of your page is actually the leftpanel. On another note, is there a point to having a wrapper div within a div that is already wrapping? A wrapper with a greater width than its parent, nonetheless.
Okay, I now have a single 'wrapper'. I'll have to work on the panel locations. It makes absolutely no sense to me that I clearly identity and size and alignment for the left, mid, and rightpanels. I've tried every way possible, but nothing seems to work! And I still need help with the z-index.
Thanks
Last edited by michael180; 07-12-2011 at 03:24 AM..
Right now I think the positioning of your elements is the least of your problems. It's always best to get rid of all your syntax errors before worrying about layout. Here's some suggestions to start you off:
-Fix all the errors shown by the w3 validator.
-Fix the ids of your panels so you (or anyone helping you) don't get confused (right now your left panel is named 'midpanel' and your mid panel is named 'leftpanel').
-Remove all padding and margins. It looks like you're trying to position your elements using margins- this is what the left/right/top/bottom attributes are for.
-Adjust the sizes of your elements. If the combined width (plus margins and padding) of your elements is smaller than that of their container, they're not going to float side by side (there won't be enough room).
Regarding z-index, your image is appearing exactly as it should. However, as I already said, you shouldn't use margins for positioning. Stick with the positioning attributes.
Right now I think the positioning of your elements is the least of your problems. It's always best to get rid of all your syntax errors before worrying about layout. Here's some suggestions to start you off:
-Fix all the errors shown by the w3 validator.
-Fix the ids of your panels so you (or anyone helping you) don't get confused (right now your left panel is named 'midpanel' and your mid panel is named 'leftpanel').
-Remove all padding and margins. It looks like you're trying to position your elements using margins- this is what the left/right/top/bottom attributes are for.
-Adjust the sizes of your elements. If the combined width (plus margins and padding) of your elements is smaller than that of their container, they're not going to float side by side (there won't be enough room).
Regarding z-index, your image is appearing exactly as it should. However, as I already said, you shouldn't use margins for positioning. Stick with the positioning attributes.
Okay it validates, now can you help me position the panels. I don't know how to do without using margins.
position: relative; will allow you to relatively position your element (i.e. the position of the element is based on where it will be flowing naturally in the document.
The attributes top, right, left, and bottom allow you to change the position of the element. For example, top: 10px; will move the element down so that it stands 10px from it's original position.
Back to the floating of your element, if you haven't checked the width sums, then check them. If the with of the elements plus their padding and margins is greater than the width of their container, they aren't going to float side by side.
position: relative; will allow you to relatively position your element (i.e. the position of the element is based on where it will be flowing naturally in the document.
The attributes top, right, left, and bottom allow you to change the position of the element. For example, top: 10px; will move the element down so that it stands 10px from it's original position.
Back to the floating of your element, if you haven't checked the width sums, then check them. If the with of the elements plus their padding and margins is greater than the width of their container, they aren't going to float side by side.
Before you post, read our: 
