zIndex issues are a common problem in Internet Explorer. My question basically is, can the following be done in IE? I've been trying but IE keeps putting the #middle div above or below...
Your biggest problem here is the container.
It can work if you don't put your container in an absolute position, or if you can put the ontop one outside the container
Example without absolute on the container
<div id="container" style="width:300px; height:300px; background-color:#CCC;">
<div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;"></div>
<div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>
</div>
<div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>
Example with ontop outside the container
<div id="container" style="width:300px; height:300px; background-color:#CCC; top:0; left:0;position:absolute; z-index:1;">
<div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;">
</div>
</div>
<div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>
<div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>
The jsfiddle linked in the comments to the question already has the correct answer implemented for maintaining the current document tree structure: the container must be forced into the normal flow via 'position: static'. Otherwise IE assumes all contained positioned elements are based on context of the z-index of the container (and in turn their z-indexing only acts relative to the container and the container's children), essentially as if the container box is not in the normal flow, even if the container was not explicitly positioned.
Here is a jsfiddle of the question without position: static attached to the container.
Here is the jsfiddle with position: static attached, as linked in the comments.
The first breaks in IE7 mode in IE9 (works fine in chrome), the second works in IE7 mode in IE9 (and works in chrome).
If 'position: static' is not an option, you will have to move the div outside of the container so that it is at least sibling to the middle div, as demonstrated in the other answer.
It's non-intuitive because z-index context for IE is based on the degree that various elements are sibling to each other within context to their flow/the normal flow, not the document structure.
Related
This question already has an answer here:
Understanding z-index stacking order
(1 answer)
Closed 5 years ago.
I was very surprised today when an element with a transform that isn't none didn't stack above an element with a position that is absolute despite having a higher z-index. However, adding position:absolute|relative to the former element made z-index perform as expected between them.
Take a look: I expected in the following for the green square (with transform:translateX(0)) to stack above them all the others from having the highest z-index, but it only stacks above the blue square which precedes it in the DOM. I attribute it to the blue square having z-index:0 and some degenerate behavior, as though both have z-index:0.
div {
opacity:0.8;
width:100px;
height:100px;
}
body {
margin:10px;
}
<div style="background-color:blue; position:absolute; top:0px; left:0px; z-index:0;">
</div>
<div style="background-color:green; transform:translateX(0); z-index:2;">
</div>
<div style="background-color:red; position:absolute; top:20px; left:20px; z-index:1;">
</div>
My expectation was that all of the elements above are in the root stacking context. What's going on?
z-index works on flex items and positioned elements(an element is “positioned” means that it has a position value other than static, e.g., relative, absolute and fixed).
If you try to set a z-index on an element with no position specified, it will do nothing.
So, just set position of green div to relative/absolute/fixed, it will be stack on top of all the div.
div {
opacity:0.8;
width:100px;
height:100px;
}
body {
margin:10px;
}
<div style="background-color:blue; position:absolute; top:0px; left:0px; z-index:0;">
</div>
<div style="background-color:green;position:relative; transform:translateX(0); z-index:2;">
</div>
<div style="background-color:red; position:absolute; top:20px; left:20px; z-index:1;">
</div>
Is there any way or workflow that will allow you to see elements that are positioned partially (or wholly) outside the viewport of the browser while designing? Like you can with artboards in Illustrator?
For example: Say I have a rectangle positioned at {left: -50px} in the body (that's a minus in there), meaning that 50px worth of rectangle is outside the viewport. Is there any tool that will visually represent that?
A hack solution: Create a div to contain all the content of your website, but make the width < 100% so that you can see the content as it overflows into the body. Change the width as you like..
<div class="virtualize-overflow">
Normal Content
<div class="overflow">Overflowing content</div>
</div>
.virtualize-overflow{
display:block;
background-color:gray;
width:50%;
height:50%;
margin:auto;
margin-top:30%;
}
.overflow{
display:block;
width:250px;
height:100px;
margin-left:-100px;
background-color:red;
}
I need to have my element's position set to fixed because I want to use it as a header in scrollable div. I also need to specify the elements poisition at top:0 and right:0
If I use those properties together it doesnt work. How can I solve this;
position:absolute;
top:0;
right:0;
works but I need to have position fixed..
If I use position fixed the div is position over the whole document not inside my div where I append it...
Fiddle:http://jsfiddle.net/TP2cp/
Use position:fixed.
Example:
HTML
<div class="main">
<div id="header"><p>Header</p></div>
</div>
CSS
.main{
width:100%;
height:2000px;
}
#header{
width:100%;
height:100px;
position:fixed;
top:0;left:0;
background:yellow;
}
JSFiddle.
UPDATE
A solution with width:inherit; :
JSFiddle#2.
Who said you couldn't use those properties together?
position:fixed;
top:0;
right:0;
Try it out yourself in this example jsFiddle here.
HTML:
<div id="theDiv">Example Div</div>
CSS:
#theDiv { position:fixed; top:0px; right:250px; }
In reply to OP's edit:
You can't have a fixed positoned div inside a container div like that, as making it a fixed div will take it out of the flow. You should use position:absolute inside of a container div with position:relative if you plan on having it fixed inside another div.
Take a look at my new jsFiddle here.
HTML:
<div id="container">
Container Div
<div id="fixed">Child Div</div>
</div>
CSS:
#container {
width: 400px;
position:relative;
}
#fixed {
position:absolute;
top:0px;
right:0px;
}
Why not:
position:fixed;
top:0;
right:0;
the problem is how did you positioned the scrollable div? if I have understand what you want I think you just need to put the header outside the scrollable div
I have a problem with a site I am doing some maintanence on, the latest test version can be found here http://www.smithandgeorg.com.au/new/ If viewed in IE7-9 or Opera this page displays as intended, however in Firefox and Safari the menu is positioned so that it is against the left side of the screen (it's best seen rather than described).
The problem seems to stem from my use of positioning. The #content element is positioned position:relative; top:0px; left:0px so that when the #menu element (which is nested inside) is positioned position:absolute; left:0px it will be pushed right up against the left side of the #content element, as happens correctly in IE9 and Opera. However Firefox and Safari seem to ignore the fact that #content is positioned relatively and just push #menu up to the left side of the screen.
I tried to reproduce the problem in the simple page below, but everything worked as expected.
<html>
<body>
<div style="border:1px solid red; width:100px; height:100px; position:relative; left:0px">
<div style="border:1px solid black; width:100px; height:100px; position:absolute; top:60px; left:20px">
</div>
</div>
</body>
</html>
Any help would be greatly appreciated :)
Firefox usually ignores position:relative on table elements, but this can be fixed by adding display:block to #content:
#content {
position:relative;
top:0;
left:0;
display:block;
}
SO question/answer about position:relative
How do I align an element on the inside edge of a tag? That is, so that it works like absolute positioning but only inside the tag.
I think a way it would work is if it were possible to force the element to think the tag was the actual page, but I don't know if this is possible/ideal.
EDIT:
http://www.flickr.com/photos/chustar/3736370208/
here's a mockup of what i mean
What you need to do here is make the container element position:relative; and then make the "positioned" elements position:absolute;
.container {
position:relative;
}
.child1 {
position:absolute;
top:0;
left:0;
}
.child2 {
position:absolute;
bottom:0;
right:0;
}
<div class="container">
<div class="child1">Top left element</div>
<div class="child2">Bottom right element</div>
</div>
When you set the container element (a <div> for example) to "position: relative", and you set the inner element to "position: absolute", the inner element is positioned relative to the outer one, not the page.