Z-index not working in absolute nested DIVs

Hi all,

I am having a problem with my z-index in a webpage I am currently developing for a client. Before we get started have a look at the following code:


#blubg_mid {
	position: absolute;
	width: 775px;
	top: 0px;
	background-image: url(images/bg_mid.jpg);
	background-repeat: repeat-y;
	height: 110%;
	left: -250px;
	z-index: 50;
}

#whitebox {
	background-color: #B9CDE9;
	position: absolute;
	width: 500px;
	left: 250px;
	top: 100%;
	z-index: 500;
	padding: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
}
<body><div id="base">

<div id="header"><div id="quote"><div id="links_box"><div id="news_box"></div></div></div><div id="blubg_top"><div id="whitebox"><div id="blubg_mid">
  <div id="blubg_btm"><div id="mission"></div></div>
  </div>
  <p><img src="images/txt_welcome.jpg" alt="welcome!" width="470" height="50" /></p>
  <p><strong>Alkira is a group of people who have come together in appreciation of and respect for people with intellectual disabilities. </strong></p>
  <p>Our community is built on enhancing their lives by responding whole heartedly to their needs, wishes and dreams.</p>
  <p>We are privileged to see people find their wellbeing and to grow in themselves and their relationships. It is tremendous to see the riches that people with disabilities can bring to those around them.</p>
  <ul>
    <li>150 people with disabilities, their families and carers</li>
    <li> 24 hours a day seven days a week </li>
    <li>4 daytime centres in Melbourne’s eastern suburbs </li>
    <li>6 residential houses </li>
    <li>6 respite &amp; crisis accommodation places </li>
    <li>55 years of community-based service</li>
    <li>Governed by a voluntary board of family and friends</li>
    <li>A registered not-for-profit funded by government, charitable grants, client contributions, workshop income and donations</li>
  </ul>
</div>
</div>
</div>





</div></body>

…What I am trying to do is place the light blue text box (#whitebox) on top of the dark blue background(#blubg_mid). I need #blubg_mid to expand as #whitebox expands to fit the text. However it appears that by placing #blubg_mid as a child of #whitebox it mucks up my z-index. No matter what I do, #blubg_mid always appears above #whitebox.

What can I do to solve this? Or maybe I need to rethink how I get #blubg_mid to expand as #whitebox does, but this was the only way I could think of…

And this is a problem in all browsers and OS so I’m guessing it’s something I’ve done wrong, not necessarily a browser bug.

Thanks, hope someone can help!

Regards,
Ross

Welcome to SitePoint Forums, Ross! :cool:

The z-index property is probably one of the most misunderstood properties in CSS. To use it properly, you need to understand the concept of [url=http://reference.sitepoint.com/css/stacking]stacking contexts.

Since #blubg_mid is a child of #whitebox, and since #whitebox establishes a stacking context (because it has an integer z-index value), you can’t put #whitebox on top of #blubg_mid by increasing its z-index.

The z-index you set for #blubg_mid is within the context of #whitebox. So if you want #blubg_mid to appear below #whitebox you need to set a negative z-index for #blubg_mid.

Try setting z-index:1 for #whitebox and z-index:-1 for #blubg_mid.

(Z-index values like 50 or 500 are pointless. Any design that requires a z-index greater than 3 or so is going to be extremely complex.)

Thanks AutisticCuckoo, that’s worked in one regard. The content of #whitebox is now showing above #blubg_mid, but the background colour is not working. The #whitebox div is just showing up with a transparent background, rather than the light blue that it is set as. Any thoughts?

Oh, and the high z-index numbers were just something I was trying to see if it helped as I saw it suggested somewhere else. Normally I just stick to numbers under 10!

Regards,
Ross

If I interpret the dimensions and postions correctly, #blubg_mid will completely cover #whitebox. And an absolutely positioned child, even with a negative z-index, will be placed on top of the containing block’s background.

Since the background for #blubg_mid is a JPEG image, which cannot have any transparent areas, it will hide the light blue background colour of #whitebox. (Try commenting out the background of #blubg_mid and you’ll see the blue background of #whitebox.)

It might be easier to see what you are doing if you could provide a link to the page (leave off the http and wwww. parts).

The code looks a little strange as your inner is bigger than the parent but without seeing the effect you want it’s hard to guess if that’s the right approach.:slight_smile:

Unfortunately you can’t place a positioned child’s background under the background of its positioned parent in IE . In other browsers when the parent (#whitebox) has z-index:auto then you can make the child (including its background) appear underneath using z-index:-1 as Tommy mentioned.

It would be better if we could see what you were trying to do visually as there may be a better way to do what you want.:slight_smile:

Sorry, I didn’t realise that I could post a link- it wouldn’t let me before (under 10 posts), but if I try to leave off what you say…

Nope that doesn’t work… um, ok to get the URL have a look under the css sub-forum on either webmasterworld or codingforums for the address. (or search for my posts ‘rossmac’ on there too)

I haven’t had a chance to try the latest tips from AutisticCuckoo & Paul O’B yet but thought I’d post this first.

I’ll have a play in the meantime

Ross

Your URL has been removed from webmasterworld, since they don’t allow links. :slight_smile:

I found it on codingforums, though: http://www.rokatdesign.com.au/clients/alkira/index2.html.

Ok, maybe I’m going about this the wrong way.
Hopefully you’ll be able to have a look at the site from the description above.

What I need to be able to happen is have both the light blue text box, and the dark blue background be able to expand automatically as more text is entered which is quite a common thing on many webpages, but something I’ve never been able to master. I thought that by placing the dark blue within the light blue and setting it at 110% of the light blue it would solve this problem. This is why I have no set height on #whitebox as I want it to expand based on the text within, and the 110% on #blubg_mid is to esnure that it is always just a little bigger than #whitebox.

I’m sure I’m going about this all wrong and that everyone else knows the real way to do this! (it’s going to be so simple isn’t it?)

Ross

It looks a bit backward to me. I don’t have time to do this thoroughly, unfortunately, since we’re hours from a major site launch. So I’ll just give you a description and hope that you can work things out from there.

You want #blubg_mid to expand to enclose the content of #whitebox. Therefore it would make more sense to reverse the structural relationship of those two, so that #whitebox is a child of #blubg_mid. That way you won’t have to deal with absolute positioning, z-indices or percentages.

If #whitebox is a non-positioned child of #blubg_mid, the latter will automatically expand and contract with its content. You can just set a left margin on #whitebox to have it indented. To right-justify it you can set a width for #whitebox (which you already have) plus margin-right:0 and margin-left:auto.

(Note, that setting dimensions in pixels is not a good idea for content that will contain text. If a user has a large font setting, this will break your layout.)

Thanks again AC, I will try those ideas. I know things look backward, but it was the only way I could think of it working… What you say makes sense so I will give it a go.

Thanks again and good luck with the site launch- thanks for taking the time to answer my queries.

I’ll let you know how it goes.

Regards,
Ross

http://www.rokatdesign.com.au/clients/alkira/index2.html

Hi,

You are going about this the wrong way altogether and you should lose all the absolute positioning and use elements in the flow or floated.

Your centering technique is very bad because the layout slides off the left side of the monitor and is unreachable on smaller screens altogether.

I’ve done a quick re-jig of the methods you should be using.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alkira : Dignity &amp; Purpose</title>
<link href="alkira.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@charset "UTF-8";
body/* CSS Document */ {
    background-color: #B9CDE9;
    text-align:center;
}
#wrapper {
    width: 980px;
    margin:auto;
    position:relative;
    text-align:left;
    padding:50px 0 0;
    overflow:hidden;
}
#header {
    height: 213px;
    width: 980px;
    background-image: url(http://www.rokatdesign.com.au/clients/alkira/images/header_03.jpg);
}
#quote {
    height: 37px;
    width: 980px;
    background-image: url(http://www.rokatdesign.com.au/clients/alkira/images/quote_a_06.jpg);
    margin:20px 0;
}
#sidebar {
    width:148px;
    float:left;
}
#links_box {
    width: 148px;
    background: url(http://www.rokatdesign.com.au/clients/alkira/images/links_box_08.jpg) no-repeat 0 0;
    padding:0 20px;
    list-style:none;
    margin:0 0 25px;
    font-size:85&#37;;
}
#news_box {
    height: 125px;
    width: 187px;
    clear:both;
    background-image: url(http://www.rokatdesign.com.au/clients/alkira/images/news_box_13.jpg);
}
#main {
    width:779px;
    float:right;
}
#blubg_top {
    height: 20px;
    width: 775px;
    background-image: url(http://www.rokatdesign.com.au/clients/alkira/images/bg_top.jpg);
    z-index: 2;
    overflow:hidden;
}
#mission {
    height: 90px;
    width: 779px;
    background-image: url(http://www.rokatdesign.com.au/clients/alkira/images/mission_17.jpg);
    clear:both;
}
#blubg_mid {
    width: 775px;
    background-image: url(http://www.rokatdesign.com.au/clients/alkira/images/bg_mid.jpg);
    background-repeat: repeat-y;
    overflow:hidden;
}
#blubg_btm {
    background-color: #FFFFFF;
    height: 1px;
    width: 775px;
    overflow:hidden;
    clear:both;
    margin:0 0 25px;
}
#whitebox {
    background-color: #B9CDE9;
    width: 500px;
    float:right;
    margin:20px 10px 20px;
    z-index: 2;
    padding: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="quote"></div>
    <div id="sidebar">
        <ul id="links_box">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="daytime.html">Daytime</a> </li>
            <li>Training and Support Services</li>
            <li><a href="recreation.html">Recreation</a> After Hours | Holidays</li>
            <li><a href="residential.html">Residential </a> Permanent | Crisis | Respite</li>
            <li><a href="workskills.html">Work Skills</a> Work experience &amp; factory jobs completed </li>
            <li><a href="people.html">Peoples&#8217; Pages</a> Creativity | Good News </li>
            <li><a href="giving.html">Giving</a></li>
            <li><a href="volunteering.html">Volunteering</a></li>
            <li><a href="publications.html">Publications</a> </li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
        <div id="news_box"></div>
    </div>
    <div id="main">
        <div id="blubg_top"> </div>
        <div id="blubg_mid">
            <div id="whitebox">
                <p><img src="http://www.rokatdesign.com.au/clients/alkira/images/txt_welcome.jpg" alt="welcome!" width="470" height="50" /></p>
                <p><strong>Alkira is a group of people who have come together in appreciation of and respect for people with intellectual disabilities. </strong></p>
                <p>Our community is built on enhancing their lives by responding whole heartedly to their needs, wishes and dreams.</p>
                <p>We are privileged to see people find their wellbeing and to grow in themselves and their relationships. It is tremendous to see the riches that people with disabilities can bring to those around them.</p>
                <ul>
                    <li>150 people with disabilities, their families and carers</li>
                    <li> 24 hours a day seven days a week </li>
                    <li>4 daytime centres in Melbourne&#8217;s eastern suburbs </li>
                    <li>6 residential houses </li>
                    <li>6 respite &amp; crisis accommodation places </li>
                    <li>55 years of community-based service</li>
                    <li>Governed by a voluntary board of family and friends</li>
                    <li>A registered not-for-profit funded by government, charitable grants, client contributions, workshop income and donations</li>
                </ul>
            </div>
        </div>
        <div id="blubg_btm"></div>
        <div id="mission"></div>
    </div>
</div>
</body>
</html>


No elements are absolutely positioned and the content is all in the flow. This means you don’t have to keep using co-ordinates to place everything and you can use margins to push elements away and it doesn’t matter what height the elements are because they will always remain at the correct distance.

Hope that helps :wink:

Your sidelinks background should not really be a fixed height image as that can’t expand and you should include a repeating section which you can then cap at the bottom.

Thanks Paul… I’ve heard of floats and using margins & padding, but never really knew how they work in regards to layout. Can’t say I do quite yet, but further investigation into the code you’ve put together will help me to figure it out- it’s all quite logical isn’t it, I just need to study it.

Incidentally, how does the wrapper know to centre the div? Is it simply because the margins are auto? Or is it something to do with the text-align in the body tag?

Thanks heaps for your help- not only is it useful for this website, it’ll help me with future ones too.

I’m still working on this site, so I may pop back with further questions, but for now thank you very much!

Regards,
Ross

Over-using absolute positioning is a mistake that those new to CSS often make because its something that they can understand quite easily. :slight_smile: However, 99% of the time it’s the wrong approach and will create rigid and unusable layouts that become impossible to alter or to expand in any meaningful way.

In most cases you don’t know how high your elements will be when using text content because the content may change at a later date and more importantly the user may also resize their text causing all the text to spill out of fixed height containers.

Using absolute positioning requires pixel precision and you cannot be sure that tons of content is going to be the same across all browsers and all systems.

It’s much better to let content flow logically without any positioning at all and so each element just follows the next irrespective of how much content is present. To create space between elements you just use margins and they will be maintainined easily.

Aligning elements horizontally requires that the elements be floated most of the time and apart from a few bugs this is pretty straight forward (see faq on floats). You must however rememeber to clear your floats because floats are removed from the flow and to regain the flow you need to clear them (see faq on floats).

Incidentally, how does the wrapper know to centre the div? Is it simply because the margins are auto? Or is it something to do with the text-align in the body tag?

If a block element has a width defined the the left and right margins (if set to auto) are divided between the horizontal space available thus centering the element.

So all you need to do to center a block element is this:


.test{
width:600px;
margin:auto;
}

(Note that doesn’t work in ie5.x so read the faq on centering)

I’m still working on this site, so I may pop back with further questions, but for now thank you very much!

Regards,
Ross

No problem :slight_smile: