Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layering elements without z-index?

    I'm a designer who is new to coding.

    In my site I was originally using z-index and padding to positions all my images. However, as I've discovered is a common problem, the images that are linked do not function if they are positioned underneath another element.

    Is there a way to separate the <a> tag from the div id so that the links still function without losing my positioning.

    Or otherwise is there another way to have elements overlap without using z-index?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    You can use css positioning instead of z-index to layer elements and in that case they will be stacked in the order they appear in the html.

    But if the top image completely covers the images below it, I'm not sure the links in the lower images can become active when the top image is hovered over.

    You might have to offset the layered images a bit so that each image is exposed slightly. Clicking on any exposed bit of each image will then activate the link for that image.
    Last edited by bullant; 04-03-2011 at 09:24 AM.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have my background image placed absolutely with z-index:0;

    Everything else is positioned relative to that. However I seem to only be able to overlap my z-index:1; on top of the background. My z-index:2; 3 4 5 etc will not lay on of my first absolute element, but rather they are laying relative to my z-index:1;

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried layering things based on css-positioning/order only, my elements do not overlap each other, but rather they appear as a "list" from the top of the page to the bottom.


  •  

    Tags for this Thread

    Posting Permissions

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