Hi all.

How do I make it so that a div layer overlaps visibly on top of another? Say, I have a layer called "rightcontent", and I want it to appear partly on top of a layer called "header".
Here's a image to make my meaning clearer:

http://static.flickr.com/50/126898211_1519f47079_o.jpg

Referring to the image, basically "header" is the bottom-most layer after "container", next comes "left content", and lastly "right content" is the top-most layer. I want "right content" (green) to partly overlap "header" (red).

I can do it in IE, but in Firefox the "header" covers part of "right content". So can anybody tell me the code that works in both IE and Firefox?

could you maybe post the code you have tried?

Your best bet would be to use absolute positioning for each element. Once you've positioned them the way that you want them, you can specify which should appear first front-to-back with the z-index property. An element with a higher z-index will appear "in front of" elements with a lower z-index. For instance...


<div style="position:absolute; top:0; left:0; z-index:0; width:100px; height:100px;"></div>

<!-- will appear behind and to the upper-left of -->

<div style="position:absolute; top:50px; left:50px; z-index:1; width:100px; height:100px;"></div>

Marta, this is the code that I use:


#header
{
width: 777px;
background-image: url(cow/header.jpg);
border-top: solid 1px #000000
}

#rightcontent
{
width: 187px;
background-image: url(images/nav.jpg);
font: 8pt/14pt "Trebuchet MS", Arial, Verdana, sans-serif;
color: #666666;
text-align: left;
float: right;
margin-right: 6px;
margin-left: 10px;
margin-top: -550px
}



pirsquared, can I still use z-index without absolute positioning the divs? Coz it messes my layout when I do that. Also I heard that absolute positioning causes the layout to look misplaced and sucky in other resolutions... I use 1280x768 as I'm using a laptop, but I cater more towards 1024x768 and 800x600 resolutions.

pirsquared, can I still use z-index without absolute positioning the divs? Coz it messes my layout when I do that. Also I heard that absolute positioning causes the layout to look misplaced and sucky in other resolutions... I use 1280x768 as I'm using a laptop, but I cater more towards 1024x768 and 800x600 resolutions.

No, you can't. And really, shouldn't want to, because without absolute positioning you can't ensure that your elements will be in the exact right positions in different browsers or at different resolutions, so trying to overlap them properly could be a very unreliable process. If your layout isn't done in absolute positioning, you would basically have to redo it around absolute posititioning, otherwise it will always be a bit of a hack job and never quite "look right".

As for the layout looking misplaced and sucky, I would say the opposite is true: absolute positioning allows you to generate a pixel-perfect layout that will always look the same regardless of the resolution at which it's viewed. Whether or not that layout looks the way you think it should at varying resolutions is entirely up to you, but it's fairly easy to accomplish once you get used to how absolute positioning works and become familiar with things like how absolutely positioned elements inside another absolutely positioned element will be positioned on a coordinate grid inside their parent element, not inside the window.

Here is an example (http://jfweb.fastmail.fm/center/center.htm) demonstrating absolute positioning of elements inside elements and overlapping with the z-index property, and how you might make a layout that displays well regardless of resolution. It works perfectly in Firefox and IE, almost works perfectly in Opera (but will never quite adjust the height properly if you resize the window because Opera only calculates the height when it loads the page), and is validates as XHTML 1.0 Strict (http://validator.w3.org/check?uri=http%3A%2F%2Fjfweb.fastmail.fm%2Fcenter% 2Fcenter.htm), too.

*nods*. I see now. Say, if I have all div layers contained inside one div, for example "container", so all that child layers will be positioned on a coordinate grid inside the "container" layer?

Thank you.

Say, if I have all div layers contained inside one div, for example "container", so all that child layers will be positioned on a coordinate grid inside the "container" layer?

That's right. The z-indexes are also based on the parent as being the "background". So, if your "container" element has a z-index of 3, and one of the elements inside it is given a z-index of 2, the parent element will still be displayed behind the child element; the z-index will only have any real affect relative to other "children".

Ah, I get it now. But does that mean I have to absolute position ALL my layers? Including the "container" layer?

Thank you! You've been so much help!

I'm not entirely sure where this "layer" terminology originated from, but yes, If you wanted all of your elements to appear in specific locations, then you would have to position them absolutely. You don't have to position everything absolutely, though. I mean, even if you wanted #container to appear x number of pixels from the left and y number of pixels from the top, there would be nothing stopping you from using elements with just regular positioning inside of it. Paragraphs and such. Inline-level elements (<span>, <img>, text) shouldn't habitually be positioned absolutely, unless they are specified to display at the block level. There's really no predefined method of positioning that you have to follow. Just do what you have to do to achieve the effect that you want. There are always, of course, tips and tricks to learn which help refine your methods, but always feel free to go nuts! You'll learn what you should and shouldn't do with experience.

For a better understanding of how positioning works with CSS, try reading the following: http://www.w3.org/TR/WD-positioning-19970819

Thanks a lot, pirsquared! You led me to the right direction :)

Happy to help. Don't hesitate to ask any more questions. It's nice to help people who actually want to go in the right direction. Or, at least, what I think is right, anyway. Which really, is all that matters because I'm so absolutely perfect. Yup. :D