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.
Related
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)
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!
I'm going to create an special floating menu like this site:
http://www.just-eat.co.uk/restaurants-toscana/menu
as you can see, Categories and Your Order menus float in screen so that their position is almost always the same, and they always stick to top of screen (of course after you scroll the page down), how can I create this effect in ASP.NET? I've set my menu style position property as fixed, but in this way, my menu always has the same position, I want my menus to stick to top of screen
Not sure if ASP.NET has such feature by default. Never seen something like that in it. But it could be done easily with CSS position:fixed placed on top most div of your menu block or using plugin like this, for instance. Please note that position:fixed may cause problems in old browsers
Hello Ali you must add stylesheet in order to float your menu, but you don't have property in order to float your menu basicaly
You can keep the position of the div to position:fixed.
By doing that its position will be relative to the position to browser window and it will appear to be fixed.
Here is Sample Fiddle
More on CSS Fixed Positioning.
I'm experimenting with jquery.scrolling-parallax.js for parallax backgrounds.
The background elements has z-index 333.
On all elements on the site i can make the backround be behind or in front of the elements by using z-indexes below or over this.
But i have problems with my header.
I have a header with fixed position and z-index 232 to have the backgrounds be seen over it.
However, in the header div i have two other divs containing logo and menu. These are position:relative and have z-index:999 since i dont want the background to be on top of them. But this does not work!
If i switch the whole header div to z-index over 333 it works fine, the background appears behind it. But i only want it to go behind those child divs!
Appreciate your help
If I understand your problem correctly, I think the problem is that your logo and menu should not be using position:relative. Try either using a different type of positioning or placing their div outside of the header div.
By using relative the child is probably taking the header divs z-index.
I have sidebar on the left hand side of my webpage that is set to postion:relative with a top value set but it also has a z-index of 10 as the top part of the sidebar needs to overlap a portion of the content at the right that is also set to relative.
I then have my footer with no position set, but has a clear:both set, that sits underneath the sidebar, as the height of the sidebar is larger the my content div.
My question is, as the sidebar grows, it doesn't push the footer down with it but rather is rendered over the top of it - any ideas what I am missing?
Is it because my sidebar has a z-index of 10 - if so, how would I get it to push the footer down instead of rendering over the top of it?
If not, then what could it be?
Mmh z-index, positioned elements and stacking context are so fun :(
Here are good resources about z-index:
Teach yourself how elements stack (renamed in How z-index works!)
Understanding CSS z-index (MDC)
The first one will let you find the solution by yourself, even if it's by trial and error.
Not sure if this would work, but what happens if you set the same z-index for the sidebar and the footer?
Kill the top declaration for your #sidebar and figure out a different way of having that top space ( margin, padding )
If that doesn't work, please link us to code.