Ie Is Ignoring Z-Index on Positioned Elements

IE ignoring zIndex

IE treats z-index a bit differently than other browsers. These blog entry might be helpful to you:

http://annevankesteren.nl/2005/06/z-index

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

In short, I think you may need to add a z-index to the parent element of the one that has it. (I'm not totally sure if adding it one level up will do -- if that doesn't work you could try adding it to the grandparent element as well.)

z-index not working with fixed positioning

This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.

Solutions

The <html> element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order

The stacking context’s root element (the <html> element in this case)

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)

So you can

set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
set the position of #over to relative so that rule 5 applies to it

The Real Problem

Developers should know the following before trying to change the stacking order of elements.

When a stacking context is formed
- By default, the <html> element is the root element and is the first stacking context
Stacking order within a stacking context

The Stacking order and stacking context rules below are from this link

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. 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.

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 above)
- 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)

Why does z-index not work?

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

Why is the CSS z-index being ignored in position relative using background cover image?

Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.

Why are all webkit browsers ignoring my z-index?

You need to increase the position for header element.

header{
  position: relative;
  z-index: 99999;
}

Because of stacking order, you cannot position the logo above the header as in your case header and main element has same stacking order, that's why you need to increase the stacking order for header than other elements such as if your main is set to 1 then set header to 2 then only your header will be in upper layer than main layer.

Hope you understand!

The best way to use your header element inside main element so that you can easily maintain the z-index.

But I agree, semantically this is not good idea.

z-index isn't applied

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.

z-index does not work in Internet Explorer with pdf in iframe

Update: Matthew Wise has a really clever alternative solution which you should consider—especially if you're having trouble with my approach or dislike ugly hacks!

There is a way to cover windowed elements in IE with other elements, but you're not going to like it.

Background: windowed and windowless elements

Legacy IE categorises elements into two types: windowed and windowless.

Regular elements like div and input are windowless. They are rendered by the browser itself in a single MSHTML plane and respect each other's z-order.

Elements rendered outside of MSHTML are windowed; for example, select (rendered by the OS) and ActiveX controls. They respect each other's z-order, but occupy a separate MSHTML plane that is painted on top of all windowless elements.

The only exception is iframe. In IE 5, iframe was a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index

In other words: iframe respects z-index for both windowed and windowless elements. If you position an iframe over a windowed element, any windowless elements positioned over the iframe will be visible!

What this means

The PDF will always be painted on top of the regular page content—like select elements were until IE 7. The fix is to position another iframe between your content and the PDF.

Demo

jsFiddle: http://jsfiddle.net/Jordan/gDuCE/

Code

HTML:

<div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>

CSS:

#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

    #inner {
        background: red;
    }

    .cover {
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

#pdf {
    position: relative;
    z-index: 1;
}

Support

This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:

<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->