1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

z-index layers

Discussion in 'CSS' started by whirlybird20, Dec 3, 2008.

  1. #1
    Hi,

    I am trying to accomplish this kind of effect where an image is placed over the edge of one or several divs.

    I am using position:relative and z-index which works fine apart from the fact that the whole page is pushed down where the image would be (just inside the body) if I didn't position it with css and z-index.
    SEMrush
    Any idea how I could do this?
     
    whirlybird20, Dec 3, 2008 IP
    SEMrush
  2. belkocrnic

    belkocrnic Active Member

    Messages:
    107
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #2
    Z index i used when you positioning something absolute, so you need to positioned absolute. Here is one example:
    #z_index{
    position: absolute;
    margin-left: -150px;
    left: 50%;
    top: +0px;
    width: 300px;
    height: 200px;
    z-index: 1;
    }

    This will place div with width: 300px and height: 200px at the horizontal middle of the screen and by changing the top: +0px will be move vertical. Also you can change the horizontal positioning by changing left: 50% and you can place it where you like. For left: 50% don't use pixels use % so you wont have problems with different resolution.
     
    belkocrnic, Dec 3, 2008 IP
  3. whirlybird20

    whirlybird20 Guest

    Messages:
    462
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks! I will give that a try.
     
    whirlybird20, Dec 3, 2008 IP
  4. belkocrnic

    belkocrnic Active Member

    Messages:
    107
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #4
    And something else i forgot, when you change the left: __%; also change the margin-left: ___px;
     
    belkocrnic, Dec 3, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    In the example image posted, it's more likely that they faked it using either images or background images.

    Z-index is something to be used lightly and avoided when possible (as is positioning, esp absolute). Depending on what thing you need to place "above" other things, you may be able to fake it. Faking it, esp with CSS, is usually the better way (but it depends).
     
    Stomme poes, Dec 9, 2008 IP