Having a strange issue in IE7. In a number of spots, I have a DIV which has position: absolute on it (faux dropdown) whenever there is something behind it which has position: relative the relative positioned item will show through the other div.
Relativly positioned item does not have any z-index set, while the absolutely positioned item (the one I want on top) has a z-index of 1000.
http://skitch.com/louiswalch/dub5h/microsoft-windows-vista
I suspect you've already tried it, but set a z-index on your relatively positioned element that's lower than your absolutely positioned element's z-index as the first test.
If that doesn't work, you need to make sure both elements are in the same stacking context. In IE, whenever you apply the position CSS rule to an element, it generates a new stacking context within that element. That means that z-index will only be properly respected within that element's children and children in other stacking contexts with lower z-indexes may still stack above.
In your case, you either need to put the dropdown and button in the same stacking context or apply z-index to the 2 elements that are generating their separate stacking contexts.
Related
In the image above, list of blocks has a maximum height with overflow-y: scoll. However, when the more icon is clicked, I want the dropdown to come over everything and ignore the max height of parent div.
Is it possible with css?
Your popup is likely an absolutely positioned element, and absolutely positioned elements are children to their nearest non-static (relative or absolute) positioned parent. If that parent has an overflow: hidden/scroll/whatever style on it it's going to cut off the child element regardless of what you set the child's z-index to.
You need to remove position: relative/absolute from the scrollable parent div and put it on the next grandparent div, then the child element won't be affected by the parent div's overflow style, however you may have to change your positioning calculations for the child if its parent has changed.
Relevant article here.
I got a DIV in my HTML-Markup, which is positioned relative. The DIVs inside this container are absolute.
this destroys the complete layout, because the following HTML-Elements are now positioned wrong, the (above) DIV which is relative, overflows them...
but why? How can I fix it?
Once you position a container with :relative, everything inside it will be positioned in relation to that. The position:absolute pulls the child elements out of the flow of the page an positions them at the top of the container with position:relative.
Thus, once you have elements with position:relative, you will want to also add rules to move and position the child elements. Consider using left: and top: or right: and bottom to position your :absolute child elements.
Alternatively, you might try to position the child elements with :relative as well, if you don't want them pulled out of the flow of the page.
Do you have code to look at, or a jsfiddle? Otherwise it's difficult to know what's going on and to suggest a fix.
If your relatively-positioned element only contains absolutely-positioned elements, you need to give it a height setting, otherwise it will have zero height (the absolutely-positioned elements won't be counted for auto height), and therefore probably cause some overlapping with subsequent elements.
In the example here, I notice if you take away the margin-left:200px from the first section element, it expands its width to fully match the container, but it doesn't go below the nav element, which is has position:absolute. Instead, it's overlaid by the nav element, as if it got a lower z-index. Why is that? Aren't both these elements in the flow of the document? So that means they should come one right after the other right, with the section element appearing under the nav element (this happens when I remove the position:absolute)? Why are they overlaid each other instead?
Aren't both these elements in the flow of the document?
Nope! position: absolute; specifically removes elements from the flow.
As referenced in this answer, absolute positioning uses current positioning context. An element with position: absolute; is still affected by its parent, however it is completely independent of its siblings.
This fiddle should demonstrate the issue:
http://jsfiddle.net/5sqxQ/2/
I want the sub menu to appear underneath the parent menu. I was then was looking to extend this with JavaScript to slide the menu from underneath on hover of the parent li element.
Not fussed about the JavaScript but can't figure out how to style the elements to achieve the desired layering.
It doesn't work because you are applying a z-index to the parent element which makes the child element stack relative to the other elements within the parent.
Once you assign an element a value for
z-index (other than auto), that
element establishes its own local
stacking context. This means that all
of the element's descendants have
their own stacking order, relative to
the ancestor element.
So if the parent has z-index: 9 and the child is z-index: 8, it's kind of like assigning a z-index of 9, 8
See the article here for a better explanation.
If you remove the z-index on the parent and set the sibling element to z-index: -1, that should work. I'm not sure about all browsers, but it works in Chrome anyway.
Here is the updated fiddle
Hope that helps.
You don't.
Instead, make the a be the "Sign In" "button".
Something like this: http://jsfiddle.net/5sqxQ/15/
Try setting the parent and siblings containers position to relative.
Its worked for me before.
Look at the rules below for how elements are stacked and you can easily come up with your own solution.
ex. Like thirtydot said, give "Sign In" .users > li > a a position, relative or absolute, and z-index: 1
The Stacking order and stacking context rules below are from this link
Stacking Order within a Stacking Context
The order of elements:
The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules below)
You cannot put a child element behind a root stacking context element
Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Non-positioned elements (ordered by appearance in the HTML)
Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
When a Stacking Context is Formed
When an element is the root element of a document (the <html> element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
what is the containing block of an absolutely positioned element? it seems the rule can be a bit complicated...
the spec should be here:
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
i want to verify if the following is true:
for simplicity, assume the containing block is a block element (not inline element)...
1) if the absolute positioned element has a closest ancestor that is positioned "non static" (relative, fixed, or absolute), then that ancestor is the containing block. the absolute positioned element is relative to it.
2) if there is no such ancestor, then the viewport is the containing block, and so the absolute positioned element is relative to the viewport.
no matter what the containing block is above, the width:100% or n% and height:100% or n% are both relative to the containing block.
that's why a
<div style="position:absolute;width:100%;height:100%;background:green"></div>
right under <body> will cover up the whole viewport exactly -- no more, no less.
we could also use position: fixed, except IE 6 doesn't support it... and so the poor programmer need to use position: absolute instead... (well, not a big deal)
Is that an accurate description of an absolute positioned element? If so, i think IE 6 and above, FF, Safari, Chrome all follow this behavior accurately?
You are correct. The containing block is the last positioned element. so if you want to explicitly set the container then give it position:relative. Most browsers get this right. CSS doesn't really have a 'viewport', I think the top is the HTML element though don't hold me to that. IE prior to 7 had an unnamed element above HTML though.
Summary:
position: relative
Does nothing except set the positioning context for all the elements contained within it. You can then position: absolute any element it contains by setting (typically one or two) values from the possible top, right, bottom or left.
If you give an element with position: relative a top, right, bottom or left value, it will shift position accordingly but leave a blank space where it would be by default. In other words, it remains within the document flow but offset.
position: absolute
To position something absolutely, you need to ask 'absolutely, but relative to which containing element'? It will either be the entire body (the default) or some other element on the page that is already positioned (usually with relative or absolute - fixed is also useful and supported in IE 7 but see this bug). It is then taken out of the document flow - other elements might appear beneath it, but won't flow around it. If it appears behind another element, you need to set the z-index property to move it in front.
A common solution is to have a centred container (margin: 0 auto) with position: relative within which other items are placed with position: absolute.
Finally, I like this little interactive CSS positioning demo.