So I'm struggling with z-index and position relative/absolute on a website I'm working on.
The issue can be seen when hovering the plus button (on the right) on this link http://bitgamers.co.uk/thebox_test/media/movie/132/fury
If you scroll down to make the popover appear at the bottom, it shows without a problem but if it appears at the top, it is hidden under the banner (which is a background image).
I've done a bit of research and think I figured that it is because those two elements are in different stacking contexts (banner and poster in the header and the tip in a container below that), what can I do to make the tip appear on top?
I've tried giving it all type of z-index and it does't make a difference. I've put a 5 seconds delay before the qtip closes so you can look at the code.
Thanks!
.media_head_holder {position:relative;z-index:100} <-- banner
.media_avatar_holder {position:absolute} <-- poster inside banner
//below
.popover {position:absolute} <--triggered from navbar
I am not sure about that... But i think it's because the z-index of banner is highter than the popover...
I know, you will say that popover has z-index = 9999 and the banner has z-index = 100.. But here we have a trap...
Tha nav you are using (.subnavbarz)(popover's parent) has z-index 50, so all his children will have z-index = 50 (less than 100 of the banner)...
When you say that the popover has z-index = 9999, you are saying that it will have this z-index relative all of the nav.subnavbarz children.. But not more than the z-index 50 of his parent..
I don't know if i am cleary (my english is terrible)
Related
I'm having an issue with this site:
https://connectiveworldenergy.com/
At the top of the page, there is some text saying "Design a happy life and create a stress free path that you've always dreamed of.
Let us show you how!". It is a clickable link.
On FireFox and IE, the link is not clickable.
I think it might have something to do with z-Index. The menu is overlapping on top of it. I've tried adjusting Z-index but haven't had luck. So then I read about z-index and it appears z-index requires elements to have the same "position"
The elements on top of it are transparent background... not sure why it's not clickable.
You have two elements: .cwe-ribbon (your clickable link) and `#top-header' (the rest of your header).
You gave #top-header a z-index of 100 so .cwe-ribbon (your clickable link) will need to be greater than this to sit on top of the other element (and be clickable).
set the z-index of .cew-ribbon to 101. In order for z-index to work you need to give the element a position so go ahead set it to position: relative.
First off, let me say its been about 6 months since I have made a website, so I am very rusty! Normally I could probably figure this out myself...
I have a header div that stretches 100% width and a drop shadow, below that I have a wrapper div with a neg z-index to allow for the top div's shadow. Everything seemed ok until I tried to add an image gallery in a div that is located inside of the wrapper div, the images won't pop up. I know this is because the positioning relative and z-index but I can't for the life of me figure out how to fix this.
I am sure this is something so simple and stupid but any help would be appreciated!
I temporarily threw it on my hosting so you can see the code:
http://graves-properties.com
Thanks,
Dan
Instead of a negative z-index on the wrapper put a higher z-index on the header , e.g., 9999. That will allow the drop-shadow to show and should resolve the image gallery issue.
I have a CSS menu here
http://www.salvationarmyqc.org/
When I hover the mouse over the menu, it shifts but only the first time a hover event occurs.
After that, it doesn't move.
I can't figure out why this is happening.
Are you able to post your css?
By the looks of it, you are setting a border width on hover which pushes the menu item down. You might try using absolute positioning, and adjusting the top height by -1 or a similar value.
for example your css might look something like.
#listContainer{position:relative;}
.listItem{position:absolute;top:0;}
.listItem:hover{top:-1;}
Im not sure why the entire navigation menu moves down in chrome without seeing your css.
your #navigation is jumping from a height of 34 to 36px. you could statically set it to 34pixels or put padding and margin to 0 for all of the li's.
I'm creating a site where I have a a logo on the page that is static positioned as normal. However I have a jQuery plugin that converts it to a fixed positioned element as it hits the top of the screen when you scroll so that it sticks in place on top of a fixed position navigation bar. The problem I have is that while the logo is still static as it hasn't hit the top yet but is overlapping the navigation bar, it appears underneath the navigation bar.I have used the z-index on the logo to try and place it on top but I'm finding that this doesn't make a difference when used across static and fixed positioned elements at the same time.
Does anyone have a solution?
Edit: I thought I should mention that I have thought of a solution myself, to have the logo always fixed positioned and to adjust its position with javascript but I would like to fix this in CSS if possible.
Just add position: relative; to the styling for #logo. z-index only works on positioned elements. Tested it in jsFiddle and it seems to work.
Happy coding!
The current html and css is a bit messy being that the site is still in early beta and is being developed, but this menu will be used.
http://beta.defiant-guild.net
I have the header and slider both absolutely positioned within a relatively positioned container div. The order of the z-index stack I need from back to front is:
header
slider
menu
slider image
menu drop down list
I am open to any ideas to make this simpler or for a fix to this. Thanks for your time.
What is your problem? Just give them appropriate z-indeces. The higher the value, the further up in the stack it will be. However, it only works on absolute or relative positioned elements. If the css is applied to the drop down menus, and whatever else has an absolute or relative position, all should be fine.