Ie Z-Index Trouble on Element with Transparent Background

IE z-index trouble on element with transparent background

Internet Explorer does not play well with "empty" elements. By making the background: none and having no content, IE treats the top textarea as if it was not there.

To get around this, you can use a transparent png for the background instead:

background: url(/images/transparent.png) repeat scroll 0 0 transparent;

JSFiddle: http://jsfiddle.net/j8Gkd/

Edit

As suggested by @Ryan, you can use data URI to add a transaparent gif to the background, meaning you do not need to create an actual transparent png:

background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7"); 

Another solution, as suggested in this answer, is to add a coloured background with full opacity:

background:white; filter:alpha(opacity=1);

z-index problem in IE with transparent div

In fact, your div "Doesn't have any background",

You need to give it a color background (e.g. white) with opacity=0.01.

For example:

 background:white; filter:alpha(opacity=1);

Image Overlay Using Z-Index But Cannot See Elements Beneath

1. Try to use percentage for left position: left: 50%
2. Looks like your decoration image inherits background-color: #262628; from wildcard selector

I have position but z index is not working

You need to remove the transform and replace it with something else and you will be able to move the pseudo-element behind:

:root{  --size:200px;}#background {  width:100%;  height:100%;  position:absolute;  top:0;  left:0;  background: linear-gradient(-23.5deg, #000033, #00001a);  z-index:-2;}
#background #mainplanet {  width:var(--size);  height:var(--size);  background:#fff;  position:relative;  top:calc(50% - var(--size)/2);  left:calc(50% - var(--size)/2);  border-radius:50%;}
#background #mainplanet:before,#background #mainplanet:after{  content:"";  width:calc(var(--size) * 1.5);  height:calc(var(--size) / 2);  border:30px solid #000;  position:absolute;  top:10px;  left:-80px;  border-radius:50%;  transform: rotateX(66deg) rotateY(170deg);}
#background #mainplanet:before{  border-top-color:transparent;}
#background #mainplanet:after{  z-index:-3;}

<div id="background">  <div id="mainplanet">  </div></div>

IE10- transparent overlay using z-index

IE10 has some issues. Try giving a background with filter. Here is how you can do it-

background:white; filter:alpha(opacity=1);

Some helpful links :

z-index problem in IE with transparent div

IE z-index trouble on element with transparent background

Hope it helps.

Problems with z-index? Text not showing in front of elements with background-color

z-index only applies top positioned elements, so you want to position your bar class absolutely and the label relatively.

#tech-entries {  width: 200px;}
.tech-entry {  position: relative;  padding-bottom: 2px;}
.tech-entry .label {  text-align: left;  padding-left: 2px;  z-index: 5;  height: 15px;  color: white !important;  position: relative;}
.tech-entry .barbg,.tech-entry .bar {  position: absolute;  left: 0;  top: 0;  height: 15px;}
.tech-entry .barbg {  background-color: gray !important;  width: 100%;}
.tech-entry .bar {  background-color: green !important;  z-index: 4;  position: absolute;}

<div id="tech-entries">  <div class="tech-entry">    <div class="label">test1</div>    <div class="barbg"></div>    <div class="bar" style="width: 99%;"></div>  </div>  <div class="tech-entry">    <div class="label">test2</div>    <div class="barbg"></div>    <div class="bar" style="width: 65%;"></div>  </div>  <div class="tech-entry">    <div class="label">test3</div>    <div class="barbg"></div>    <div class="bar" style="width: 88%;"></div>  </div></div>

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.

What has bigger priority: opacity or z-index in browsers?

This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contexts doesn't mention anything about it. However, the visual formatting module links to the color module where this particular gotcha can be found (emphasis mine):

Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. If an element with opacity less than 1 is positioned,
the ‘z-index’ property applies as described in [CSS21], except that
‘auto’ is treated as ‘0’ since a new stacking context is always
created. See section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).

---

Related Topics