SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    York, Uk
    0 Post(s)
    0 Thread(s)

    Faux Column Tutorial Raises A Question

    Buongiorno from 1 gegrees C occasionally snowing Wetherby UK :-)

    Ive followed this excellent tutorial and produced this:

    But Ive got a question specifically to do with why container 1 sits on top of containers 2 & 3 thus showing its red color infront of the other divs before any position:relative; right:40%; bits are applied

    The exact bit in the tutorial i'm referring to is illustrated here:

    I wonder is the reason container 1 sits on top is related to z index. I'm a bit confused how the colors reveal themselves :-(

    Any insights welcome :-)
    Grazie tanto,
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977

  2. #2
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    0 Post(s)
    0 Thread(s)
    Look at the way the HTML div's are nested. Container one is nested inside container two, which is nested inside container three. From what I see from this example of triangles, the "z-index" property will change the stack level.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    To envisage what's going on here imagine you have three playing cards stacked on top of each other. Now slide each playing card slightly to the left to reveal a strip of each card at the side. This strip at the side is just the card underneath being revealed. By sliding the cards you can see a bit of each card.

    The layout technique just follows that process. You have 3 nested containers but at first all you would see would be the inner container as its background would cover the other two parent's background. Therefore you slide the two inner containers to the left thus revealing the edges of the inner containers just like you would with the cards I mentioned. The further you slide the cards the more of the background is revealed.

    However all your content is still inside the inner container which is shifted to the left now. All that's needed is to nest another 3 inner floated containers and drag each one back to the right over the edges of the now revealed background colours. So taking the card analogy imagine the top card has 3 pennies stacked on top of it. You have moved the cards initially to the left and then you now take each penny and move it onto the edge of each card.

    Here is a simpler html structure so you can visualise what's going on.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    	border:1px solid #000;
    .col2{background:green;margin:10px 0 0 -100px;}
    .col3{background:blue;margin:10px 0 0 -100px;}
    <div class="col1">
    <div class="col2">
    <div class="col3">
    <p class="content1">Content 1</p>
    <p class="content2">Content 2</p>
    <p class="content3">Content 3</p>
    All the position:relative does is to move the element somewhere else without disrupting the flow. There is no real need for a z-index as the levels will be right form the start.

    It's an old technique and similar to my original demos from 2002. These days you can use display:table for ie8+ and not worry about such hacks unless you need full ie7 support.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts