[css-d] Z-Index with Fixed/Absolute Elements in IE

2015-06-08 Thread Roger Blanton 
Hello,

I have a header that is postion fixed similar to the CSS below:

header {
position: fixed;
width: 1100px;
left: 50%;
margin-left: -550px;
z-index:999;
}

.absolute-element {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}

In all browsers other than IE these behave as expected with the header
appearing on top of the absolute positioned element, however in IE, the
absolute positioned element appears on top of the header.

Any ideas would be greatly appreciated.

Thanks,

Roger
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Z-Index with Fixed/Absolute Elements in IE

2015-06-08 Thread Tom Livingston 
On Mon, Jun 8, 2015 at 3:14 PM, Roger Blanton rblan...@ltu.edu wrote:
 Hello,

 I have a header that is postion fixed similar to the CSS below:

 header {
 position: fixed;
 width: 1100px;
 left: 50%;
 margin-left: -550px;
 z-index:999;
 }

 .absolute-element {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 }

 In all browsers other than IE these behave as expected with the header
 appearing on top of the absolute positioned element, however in IE, the
 absolute positioned element appears on top of the header.

 Any ideas would be greatly appreciated.

 Thanks,

 Roger


Seems like source order is winning. Did you try adding z-index of a
lower amount to the absolute-element? Also, what is absolute-element
positioned relative to? Body? A parent?


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Z-Index with Fixed/Absolute Elements in IE

2015-06-08 Thread Roger Blanton 
Hey Guys,

I probably should have been more specific.  The element I was positioning
absolute was an iframe youtube video.  In IE this is a known issue and
adding ?wmode=opaque to the URL resolves this issue.

Here is the stack overflow link in case anyone is interested:

http://stackoverflow.com/questions/7054580/youtube-iframes-sitting-on-top-of-fixed-position-element-in-chrome

Thanks to Tom for helping me out on this one!

Cheers!
Roger

On Mon, Jun 8, 2015 at 3:14 PM, Roger Blanton rblan...@ltu.edu wrote:

 Hello,

 I have a header that is postion fixed similar to the CSS below:

 header {
 position: fixed;
 width: 1100px;
 left: 50%;
 margin-left: -550px;
 z-index:999;
 }

 .absolute-element {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 }

 In all browsers other than IE these behave as expected with the header
 appearing on top of the absolute positioned element, however in IE, the
 absolute positioned element appears on top of the header.

 Any ideas would be greatly appreciated.

 Thanks,

 Roger

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/