Overlaying DIVs

Discussion in 'Web Design and Development' started by dejo, Aug 24, 2006.

  1. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #1
    The Question: How do I get Overlay #1 to overlap the green, right-side the same way that Overlay #2 overlaps the red, left-side? Overlay #1 must be "tied-to" the left-side DIV, so that wherever the red area goes, Overlay #1 goes with it.

    The Page:
    Overlay Test

    The Screenshot:
    [​IMG]

    The Code:
    P.S. My apologies to anyone who's red-green color blind.
     
  2. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #2
    I hope this helps you:

    I added z-index and changed left position to 150px for #overlay_box_1

    Code:
    #overlay_box_1 {
    background-color: yellow;
    width: 200px;
    height: 50px;
    position: absolute;
    top: 0px;
    [COLOR="Red"]left: 150px;[/COLOR]
    opacity: 0.8;
    [COLOR="Red"]z-index: 99;[/COLOR]
    }
    
    Here is how it looks:
     

    Attached Files:

  3. dejo thread starter Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #3
    Thanks for the help. The z-index manipulation does the trick, except for in Internet Explorer. Grr... :mad:
     
  4. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #4
    Only 2 days until IE7 is released. God, I hope it's CSS support is better than IE6.
     

Share This Page