No one hates CSS more than I do. Some essential tips:

• if you are floating an element, make sure to set its width
• if you set the width of a div in html, it has no effect. the width must be set in css
• say you have a div and set its width to 100%. it means the div will take up 100% of the width of its parent container
• if you set a div’s width, and then apply padding and/or margins to the div – its width will change. to get around this, use the technique of the inner div as explained in stylin’ with css by charles smith

Understanding Z Index
Example 1:

<div id="div1">
    <div id="div2"></div>
</div>

div
{
    position:absolute;
    width:100px;
    height:100px;
}

#div1
{
    z-index:2;
    background:rgba(255,0,0,0.8);
    left:0px;
    top:0px;
}

#div2
{
    z-index:1;
    background:rgba(0,255,0,0.8);
    left:20px;
    top:20px;
}

Result: div2 appears on top of div1 even though its z-index is less than div1
Lesson: Descendants will always appear on top of parent even if their z-index is less than that of parent.

Look at Example 2 vs Example 3 below to understand the difference between z-index:auto and z-index:inherit
Example 2

<div id="div1">
    <div id="div2"></div>
    <div id="div3"></div>
</div>

div
{
    width:100px;
    height:100px;
    position:absolute;
}

#div1
{
    top:0;
    left:0;
    z-index:10;
    background:rgba(255,0,0,0.8);
}

#div2
{
    top:10px;
    left:10px;
    z-index:1;
    background:rgba(0,255,0,0.8);
}

#div3
{
/* z-index is left unspecified */
    top:20px;
    left:20px;
    background:rgba(0,0,255,0.8);
}

Result: div2 appears at the top followed by div3, then div1.
Lesson: if z-index is left unspecified, element shares stacking context of its parent and as seen in example 1 will appear on top of parent.
Contrast above with
Example 3:

#div3
{
    z-index:inherit;
    top:20px;
    left:20px;
    background:rgba(0,0,255,0.8);
}

Lesson: Now div3 will inherit z-index of the parent and in addition establish a new stacking context which will compete and win against stacking context of div2

Example 4:

<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3"></div>

div
{
    width:100px;
    height:100px;
    position:absolute;
}

#div1
{
    top:0;
    left:0;
    z-index:0;
    background:rgba(0,0,255,0.8);
}

#div2
{
    top:10px;
    left:10px;
    z-index:10;
    background:rgba(0,255,0,0.8);
}

#div3
{
    top:20px;
    left:20px;
    z-index:5;
    background:rgba(255,0,0,0.8);
}

div1 and div3 are at same level in the DOM hierarchy. div3 has higher z-index. so it will appear at the top. div1 forms container for div2. by lesson #1, div2 will render on top of div1.

Example 5:
This one is unexpected:

<div id="div0">
<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3"></div>
</div>    

div
{
    width:100px;
    height:100px;
    position:absolute;
}

#div0
{
z-index:69;    
}

#div1
{
    top:0;
    left:0;
    background:rgba(0,0,255,0.8);
}

#div2
{
    top:20px;
    left:20px;
    z-index:10;
    background:rgba(0,255,0,0.8);
}

#div3
{
    top:10px;
    left:10px;
    z-index:5;
    background:rgba(255,0,0,0.8);
}

Result: div2 is at top, followed by div3, then div1.
Expected: div3 to be at the top since it will create a new stacking context whereas div2 will share stacking context of the parent. This example seems to violate what we learnt from Example 2.

Some References:

Z-Index And The CSS Stack: Which Element Displays First?

http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892