Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Combination Z-index and link not working.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #178902
    First Things
    Participant

    Hello dear reader,

    I’m trying to fix a problem with my z-index and a link that is not showing up.

    I did google a lot today on this subject:

    For z-index to work properly you should:

    • better use no negative values (others say you can..)
    • combine the z-index always with a position-statement (fixed, absolute or relative)

    I tried those solutions but it still wont fix my problem.

    My website use a header that is positioned ‘fixed’. Because it has to stay always on top of the page and the content should scroll under it. That way a give this header a z-index of ten.

    In my content i made some div’s with links in it. That should scroll under the header. So i started with give the content div a lower index. And that did the trick. The divs scroll under the header…

    But because i used lower z-index a on the div, the links in it don’t show up anymore :-(

    I need a hint/tip/link that will make my links appear, but the div still have to be able to have a lower z-index then my header. So the content-divs will scroll under the header.

    I hope you understand my problem and give me a solution ;-)

    Thanks in advance!

    kristof

    #178906
    shaneisme
    Participant

    Don’t over-complicate your z-index rules. The children of an element with z-index will inherit it, any z-index you give to them will start from that point.

    Just from your explanation, you should only have one element with z-index, and that’s the fixed menu itself.

    If you provide a CodePen example, we can take a closer look.

    #179007
    First Things
    Participant

    Okay, Thanks Shaneisme, Sornombo and gcyrillus!!!

    I did find the solution now :-)

    I followed the advise of Shaneisme, “keep it simple” use only one z-index for the header…

    So i deleted all the other Z-indexes and my problem was fixed. I guess i tried a little to much z-indexes and made some mistake somewhere. Don’t know where but my div’s and links are doing what they need to do.

    BTW gcyrillus, add a other z-indx to link was not neccesery anymore.

    But all three thank you for the tips/hints and solution, me happy, i can go on with my next problem ;-)

    Have a nice day,
    thanks,

    Kristof

    #179024
    First Things
    Participant

    Seems to be there is still a little problem with my ‘SHARE THIS’ buttons and links.

    The css that is provided by the ‘share this’ code is using z-index.

    I tried to fix the problem with overriding the z-index there:
    It let the share-this-buttons scroll under my header but then the links are not clickable…

    I tried a lot and also the solution from ‘Gcyrillus’ with no z-index on the z-index on the links but no luck.

    So my question is still: “how do you let the links work in a div that has a lower z-index….

    I put my project online for testing ‘Soronbo’:

    http://www.sweetmorning.be/en/projects/bb

    Kristof

    #179049
    First Things
    Participant

    AtelierBram you are my hero of the day!

    It works like a charm :-)))))

    Online version is up to date with your solution.

    Kristof

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.