Z-index, absolute positioning, and the Box Model. [Archive]

SGBotsford

03-12-2006, 07:24 PM

This one has me buffaloed.
Overview:
Horizontal layout:
picrow: row of pictures, absolutely positioned, but horizontal position is based on percentage of width. This allows the picture row to expand and contract with with width, and to overlap gracefully on a narrow browser.

Banner: Logo, and 2 lines about organization. This has top margin set so that the edges of the logo, and the organization name overlap the pictures slightly.

Navigation bar.
Content.

Problem is that the pix end up in front of the Banner, despite giveing the banner a high z-index.

If, however, ONE picture in the first div is relative, everything works (The organization name overlaps several pictures, but having the first one be relative is sufficient.)

This effect is common to firefox, opera and IE. Obviously there is something I don't understand about how absolute positioning, the box model, and z-index interact.

Now: more detail: (I may have mucked this up a bit. I've simplified this
to try to make the example of the problem short & sweet.)

Here's the top of the html page:
(Change first image to relative, left 8% and then it works.

<body>
<div id="header" >
<div id="picrow">
<img style="position: absolute; top: 4px; left: +12%;"
src="../Images/ArcticRadar-120.jpg"
alt="Arctic Airfield">
<img style="position: absolute; top: 25px; left: 22%;"
src="../Images/BorealSunset-120.jpg"
alt="Sunset on Boreal Lake">
<img style="position: absolute; top: 4px; left: 32%"
src="../Images/FoulWeatherOnLake-120.jpg"
alt="Rainy Day Portage">
<img style="position: absolute; top: 25px; left: 42%"
src="../Images/CattailSunrise-120.jpg"
alt="Cattail Sunrise">
<img style="position: absolute; top: 4px; left: 52%;"
src="../Images/Elder+Child-120.jpg"
alt="Elder and Child">
<img style="position: absolute; top: 25px; left: 62%;"
src="../Images/DogribBoy-120.jpg"
alt="Dogrib Boy">
<img style="position: absolute; top: 4px; left: 72%"
src="../Images/DeneElders-120.jpg"
alt="Dene Elder">
<img style="position: absolute; top: 25; left: 82%; "
src="../Images/DepthsOfCoastalWinter-120.jpg"
alt="Fishing Boat in Ice in Depths of Coastal Winter">
</div> 
<div id="banner">
<img style="float: left"
src="../Images/FreeSpirits-160.gif"
alt="FreeSpirit Pimatisiwin Logo" >
<h1>PIMATISIWIN </h1>
<h3>A Journal of Indigenous and Aboriginal Health</h3>
</div>
</div> 

*****
Chunks of my style sheet.

#picrow { /* picture row at top of page. picrow is part of header */
clear: both;
z-index: 0;
padding-left: 5%;
padding-bottom: 80px;
z-index: -4;
}
#banner { /* pim logo */
float: left;
/*position: relative; top: 50px; */
background-color: #393;
z-index: 20;
}

SGBotsford

03-14-2006, 01:56 AM

Here is a much simpler example:

This file is complete except for the freespirit logo. Substitute any suitable image. (The image I used is 160 x 160 pixels.

The result of this: The logo is in front of the text, despite the text being in a div with z-index of 20

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Pimatisiwin Journal Issues</title>
</head>
<body>
<div style="z-index: 1; width=49%">
<img style="position: absolute; top: 0; left: 100; "
src="../Images/FreeSpirits-160.gif"
alt="foo">
</div>
<div style="z-index: 20; ">
<H1>Pimatisiwin: A Journal of Aboriginal Health</h1>
</div>
</body>

NogDog

03-14-2006, 02:42 AM

An element needs to be "positioned" for z-index to work, so try adding "position: absolute" or "position: relative" for the second DIV.

pcthug

03-14-2006, 02:51 AM

Z-Index (http://www.w3schools.com/css/pr_pos_z-index.asp) won't work on a static positioned element, therefore an alternative value must be applied. see:
http://www.quirksmode.org/css/position.html