Z-index problem "Build a Resume"


#1

I'm on the final lesson in basic html & css, "Build a Resume"

I've built my Resume and the lesson is telling me that everything is great and that I've completed, I've looked thorough the html & css and it looks to be correct.

But for some reason the z-index is not doing it's job and the left and right div's are going underneath the header.

Any ideas what it could be?


#2

Here's the html...

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Michael Mansfield CV</title>
    </head>
    <body>
        <div id="header">
            <h1>Michael Mansfield Graphic Design</h1>
            <h4> Click here to see my design <a href="http://www.mistermrdesign.com/">www.mistermrdesign.com</a></h4>
        </div>
        <div class="left">
            <ol>
                <li>Work</li>
                <li>Profile</li>
                <li>Experience</li>
                <li>Contact</li>
            </ol>
        </div>
        <div class="right">
            <h1>Profile</h1>
            <p>Composition of type, colour, image and graphic solutions are the compelling driving force that keeps me buzzing in the design world. For me there is nothing more exciting than the relationship between these elements and the engagement of a user.
            My career path has seen me working across a range of adrenaline sport and alternative lifestyle magazines. My folio demonstrates an ability to create brands that capture the readership persona and grow them in to the working identities that have become recognised and loved worldwide.
            As a great team player, I revel in the immersive creative environment of strategic idea generation. Utilising excellent communication skills to build and nurture strong working relationships, I ensure my clients get exactly the content they want in the way that they want it.</p>
        </p>
        </div>
        <div id="footer">
            <table>
                <tr>
                    <td>email</td>
                    <td>address</td>
                    <td>mobile</td>
                    <td>LinkedIn</td>
                </tr>
            </table>
        </div>    
    </body>
</html>

#3

Here's the CSS...

#header {
    position: fixed;
    z-index: 1;
    border-radius: 5px;
    background-color: #c2d6d6;
    padding: 20px;
    height: 130px;
    width: 800px;
}
.left {
    float: left;
    padding: 20px;
    border-radius: 5px;
    background-color: #b8b894;
    height: 300px;
    width: 200px;
}
    
.right {
    float: right;
    padding: 20px;
    border-radius: 5px;
    background-color: #ffbf80;
    height: 300px;
    width: 600px;
}

#footer {
    clear: both;
    border-radius: 5px;
    background-color: #c2d6d6;
    height: 100px;
    width: 800px;
    }

#4

isn't the whole point of having a fixed header that it stays on top? I doubt z-index is going to change this. Can't you simple use margin-top to push left and right down?

A item with a z-index (even negative) is higher then a item without z-index


#5

That's great, thanks, margin-top has sorted the problem.

So is z-index for bringing elements to the front and setting layer formation.
Or is it for keeping boxes away from each other?


#6

z-index uses layer formation, which layer should be in front/behind in case of a conflict.

But, this important (thank you mdn, as always):

The z-index property specifies the z-order of an element and its descendants.

Uhm... #header and and .left,.right are no descendants of each other. So, z-index isn't going to do much.

You know when you have a graph (with x on horizontal axis, and y on the vertical axis? Z would be the third axis, going through your screen.

Anyway, i hope this helped


#7

The Box Model


Image courtesy of www.w3.org!


#8

That's great, I get it now.

So basically... z-index is using layering in a hierarchy format with 1 being the top layer.


#9

No, the higher the z-index ( i believe you can get to 9999), the item will be in front. A item with a z-index is in front of a item with no z-index (this even goes if the z-index of the item in question is -9999)


#10

@mikemansfield,
The Documet Object Model in short the DOM
of your HTML document

                      html
                       |
      +----------------+----------+
      |                           |
     head                        body
      |                           |            
   +--+-+         +-----------+---+-----+---------+
   |    |         |           |         |         |
  link title     div         div       div       div
                 | #header   | #left   | #right  | #footer
                ++-+         ol      +-++      table
                |  |         |       |  |        |
                h1 h4    +--++-+--+  h1 p        tr
                         |  |  |  |              |
                         li li li li        +--+-++--+
                                            |  |  |  |
                                            td td td td