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.
Related
Why is my div cutting off the content of its contained absolutely positioned div?
I am trying to get my twitter bootstrap popover to be "on top" of the containing div. As you can see below, the popover is being cut off.
Z-index
Popover is absolutely positioned, so figured I'd try increasing z-index. Didn't work.
overflow: visible
Then next I figured I'd check for all the containing elements having overflow set to something other than visible, but that also didn't change anything.
Is there some CSS attribute I'm forgetting to check?
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'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!
First off, please let me say I'm pretty new to CSS. Still lots to learn! I'm working on a site at https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77
Everything is working great, EXCEPT that the main content box is being placed under the fixed-position logo instead of over it, even though the z-index on the logo is lower than the z-index on the content box. What can you geniuses tell me?
There's actually two reasons:
Its parent is set to show up behind the logo. Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the logo as specified by its stack order.
A z-index only applies to elements with position of absolute, fixed, or relative. It does not apply to elements with static position.
It is constrained by the parent container's z-index. You cannot set a child to a higher z-index than the parent; it caps at the parent's value.
You could make the stripes a background of the body tag and then set the container to have no background. Once that is done set container to a higher z-index.`
Here's a link that shows the problem: http://xotics.equivalenceclass.com/test.php
In IE7 it opens behind the blue "home-banner" and "home-banner-wrapper" DIV. I'm not sure why. When removing the background image for "home-banner", but I don't believe that this solves the problem. I tried playing with the z-index CSS properties of the elements to no avail.
It's because you have position: relative on the containing div. The z-indexes will apply only within that div. Add a z-index to #header and it should work.