- This topic is empty.
-
AuthorPosts
-
August 13, 2014 at 9:18 am #178902First ThingsParticipant
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
August 13, 2014 at 10:01 am #178906shaneismeParticipantDon’t over-complicate your
z-index
rules. The children of an element withz-index
will inherit it, anyz-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.
August 14, 2014 at 1:23 am #179007First ThingsParticipantOkay, 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
August 14, 2014 at 4:47 am #179024First ThingsParticipantSeems 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
August 14, 2014 at 6:45 am #179049First ThingsParticipantAtelierBram you are my hero of the day!
It works like a charm :-)))))
Online version is up to date with your solution.
Kristof
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.