I&#39;m trying to find an answer to the following question:

*Is an element&#39;s z-index style its absolute stack order, or its stack order relative to its parent?*

For instance, suppose I have the following code:

    &lt;div style=&quot;z-index:-100&quot;&gt;
        &lt;div id=&quot;dHello&quot; style=&quot;z-index:200&quot;&gt;Hello World&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;dDomination&quot; style=&quot;z-index:100&quot;&gt;I Dominate!&lt;/div&gt;

Which one will be in front - #dHello, or #dDomination?

That&#39;s just for examples.  I&#39;ve tried this in multiple places and results seem to vary.  I&#39;m seeing if anyone knows of an authoritative source for settling:

1) What are the actual standards regarding z-index (on this topic specifically)?
2) How do individual browsers vary in their actual implementation of this?

Thanks!

Z-Index Relative or Absolute?

I have two elements in the same container, the first has `position: absolute`, the second `position: relative`. Is there a way to set the &quot;z-index&quot; of an absolute element so that its in the background? The relative positioned element should be on the top (z-layer) because it holds links...

Here is a JSFiddle: http://jsfiddle.net/8eLJz/

The absolute positioned element is on the top of the z-layer and I have no influence with the `z-index`-property. What can I do?

Placing absolute behind relative positioned element

I want to move one view on top of another, how can I know the z index of the view, and how to move on to top?

How to set iPhone UIView z index?

So if I understand `z-index` correctly, it would be perfect in this situation: 

![enter image description here][1]


  [1]: http://i.stack.imgur.com/UFHRb.jpg

I want to place the bottom image (the tag/card) below the div above it. So you can&#39;t see the sharp edges. How do I do this?

    z-index:-1 // on the image tag/card
    
or

    z-index:100 // on the div above

doesn&#39;t work either. Neither does a combination of anything like this. How come?


Why does z-index not work?

I have a linear layout which consists of imageview and textview , one below another in a linear layout.    
    
    &lt;LinearLayout android:orientation=&quot;horizontal&quot; ... &gt;
     &lt;ImageView 
         android:id=&quot;@+id/thumbnail&quot;
         android:layout_weight=&quot;0.8&quot; 
         android:layout_width=&quot;0dip&quot;
         android:layout_height=&quot;fill_parent&quot;&gt;
     &lt;/ImageView&gt;
     &lt;TextView 
        android:id=&quot;@+id/description&quot;
        android:layout_weight=&quot;0.2&quot;
        android:layout_width=&quot;0dip&quot;
        android:layout_height=&quot;wrap_content&quot;&gt;
     &lt;/TextView&gt;
&lt;/LinearLayout&gt;

Some rules might be missing , this is to give an idea , how layout looks.
I want another small text view of say 50dip in length and width , placed over the imageview, by &quot;over&quot; I meant z-index more than imageview , I want to place this , in the center and above(overlapping) the imageview.

I want to know how can we place one view above the other, with varying z-index (preferably in linear layout) ?

Placing/Overlapping(z-index) a view above another view in android

I&#39;m using the svg circles in my project like this,

    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 160 120&quot;&gt;
        &lt;g&gt;
            &lt;g id=&quot;one&quot;&gt;
                &lt;circle fill=&quot;green&quot; cx=&quot;100&quot; cy=&quot;105&quot; r=&quot;20&quot; /&gt;
            &lt;/g&gt;
            &lt;g id=&quot;two&quot;&gt;
                &lt;circle fill=&quot;orange&quot; cx=&quot;100&quot; cy=&quot;95&quot; r=&quot;20&quot; /&gt;
            &lt;/g&gt;
        &lt;/g&gt;
    &lt;/svg&gt;

And I&#39;m using the z-index in the `g` tag to show the elements the first. In my project I need to use only z-index value, but I can&#39;t use the z-index to my svg elements. I have googled a lot but I didn&#39;t find anything relatively.
So please help me to use z-index in my svg.

Here is the [DEMO.][1]


  [1]: http://jsfiddle.net/hu2pk/2/

How to use z-index in svg elements?

I&#39;ve isolated a little test case of IE7&#39;s `z-index` bug, but don&#39;t know how to fix it. 
I have been playing with `z-index` all day long.

What is wrong with `z-index` in IE7?

Test CSS:

&lt;!-- language: lang-css --&gt;

    input {
    	border: 1px solid #000;
    }

    div {
    	border: 1px solid #00f;
    }

    ul {
    	border: 1px solid #f00;
    	background-color: #f00;
    	list-style-type: none;
    	margin: 0;
    	padding-left: 0;
    	z-index: 1000;
    }

    li {
    	color: #fff;
    	list-style-type: none;
    	padding-left: 0;
    	margin-left: 0;
    }

    span.envelope {
    	position: relative;
    }

    span.envelope ul {
    	position: absolute;
    	top: 20px;
    	left: 0;
    	width: 150px;
    }

Test HTML:

&lt;!-- language: lang-html --&gt;

    &lt;form&gt;
      &lt;label&gt;Input #1:&lt;/label&gt;
      &lt;span id=&quot;envelope-1&quot; class=&quot;envelope&quot;&gt;
        &lt;input name=&quot;my-input-1&quot; id=&quot;my-input-1&quot; /&gt;
          &lt;ul&gt;
            &lt;li&gt;item&lt;/li&gt;
            &lt;li&gt;item&lt;/li&gt;
            &lt;li&gt;item&lt;/li&gt;
            &lt;li&gt;item&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/span&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;label&gt;Input #2:&lt;/label&gt;
      &lt;span id=&quot;envelope-2&quot; class=&quot;envelope&quot;&gt;
        &lt;input name=&quot;my-input-2&quot; id=&quot;my-input-2&quot; /&gt;
      &lt;/span&gt;
    &lt;/form&gt;

IE7 Z-Index Layering Issues

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor.

I have tried all values for z-index from 0 - 999999. Can anyone tell me why this is happening?

Is there any minimum or maximum value of Z-INDEX property of CSS?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .divClass {
         position: absolute; 
         left: 25px; 
         top: 25px; 
         width: 320px;
         height: 300px; 
         z-index: 1000; 
    }

&lt;!-- language: lang-html --&gt;

    &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;100%&quot;&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;asp:HyperLink ID=&quot;lnkProgram&quot; runat=&quot;server&quot;&gt;&lt;/asp:HyperLink&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;td&gt;
             &lt;div class=&quot;divClass&quot;&gt;
               Some Data
             &lt;/div&gt;
         &lt;/td&gt;
      &lt;/tr&gt; 
    &lt;/table&gt;

&lt;!-- end snippet --&gt;

I am showing and hiding the div with `.divClass` onclick via the `&lt;asp:hyperlink&gt;` using jQuery.

Minimum and maximum value of z-index?

Suppose I have this code:

    &lt;div class=&quot;parent&quot;&gt;
        &lt;div class=&quot;child&quot;&gt;
            Hello world
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;wholePage&quot;&gt;&lt;/div&gt;

This jsFiddle: http://jsfiddle.net/ZjXMR/

Now, I need to have`&lt;div class=&quot;child&quot;&gt;` in above of `&lt;div class=&quot;wholePage&quot;&gt;` but in the jsFiddle you can see that the child element rendered before `&lt;div class=&quot;wholePage&quot;&gt;`.

If you remove the `parent` class `position` or `z-index`, everything works fine. This is the correct behavior that I need: http://jsfiddle.net/ZjXMR/1/

How can I do that with `z-index` and without removing anything from page?

How to make child element higher z-index than parent?

i&#39;m trying to use a drop shadow to make it look like one div (the header) is &quot;above&quot; another. my problem is that the &quot;middle&quot; div is covering the drop shadow. i tried using z-index to put the header div about the middle div, but it&#39;s not working (the shadow is still being covered). when i put a break between the divs, i can see the shadow and therefore i know that part of the code is working properly. i have the following html code:

    &lt;div id=&#39;portal_header_light&#39;&gt;
    &lt;img src=&quot;Home.png&quot; height=&quot;32px&quot; \&gt;
    &lt;img src=&quot;Wrench.png&quot; height=&quot;32px&quot; \&gt;
    &lt;/div&gt;
    &lt;div id=&#39;middle&#39;&gt;&lt;/div&gt;

and this css:

    #portal_header_light {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px; text-align:center;
    	-moz-border-radius: 3px 3px 3px 3px;
    	-webkit-border-radius: 3px 3px 3px 3px;
    	padding: 0px 3px 0px 3px;
    	background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
    	
    	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    	-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
    
    	z-index:5;
    }
    
    #middle{
    	height:308px;
    	background-color:white;
    	z-index:-1;
    }

any ideas? thanks.

css3 drop shadow under another div, z-index not working

I can&#39;t figure out how to bring images to front using `CSS`. I&#39;ve already tried setting z-index to 1000 and position to relative, but it still fails.

Here&#39;s example-

&lt;!-- begin snippet: js hide: false console: true --&gt;

&lt;!-- language: lang-css --&gt;

    #header {
        background: url(http://placehold.it/420x160) center top no-repeat;
    }
    #header-inner {
        background: url(http://placekitten.com/150/200) right top no-repeat;
    }
    .logo-class {
        height: 128px;
    }
    .content {
        margin-left: auto;
        margin-right: auto;
        table-layout: fixed;
        border-collapse: collapse;
    }
    .td-main {
        text-align: center;
        padding: 80px 10px 80px 10px;
        border: 1px solid #A02422;
        background: #ABABAB;
    }

&lt;!-- language: lang-html --&gt;

    &lt;body&gt;
        &lt;div id=&quot;header&quot;&gt;
            &lt;div id=&quot;header-inner&quot;&gt;
                &lt;table class=&quot;content&quot;&gt;
                    &lt;col width=&quot;400px&quot; /&gt;
                    &lt;tr&gt;
                        &lt;td&gt;
                            &lt;table class=&quot;content&quot;&gt;
                                &lt;col width=&quot;400px&quot; /&gt;
                                &lt;tr&gt;
                                    &lt;td&gt;
                                        &lt;div class=&quot;logo-class&quot;&gt;&lt;/div&gt;
                                    &lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;tr&gt;
                                    &lt;td id=&quot;menu&quot;&gt;&lt;/td&gt;
                                &lt;/tr&gt;
                            &lt;/table&gt;
                            &lt;table class=&quot;content&quot;&gt;
                                &lt;col width=&quot;120px&quot; /&gt;
                                &lt;col width=&quot;160px&quot; /&gt;
                                &lt;col width=&quot;120px&quot; /&gt;
                                &lt;tr&gt;
                                    &lt;td class=&quot;td-main&quot;&gt;text&lt;/td&gt;
                                    &lt;td class=&quot;td-main&quot;&gt;text&lt;/td&gt;
                                    &lt;td class=&quot;td-main&quot;&gt;text&lt;/td&gt;
                                &lt;/tr&gt;
                            &lt;/table&gt;
                        &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/table&gt;
            &lt;/div&gt;
            &lt;!-- header-inner --&gt;
        &lt;/div&gt;
        &lt;!-- header --&gt;
    &lt;/body&gt;

&lt;!-- end snippet --&gt;



Bring element to front using CSS

Using transform property, z-index is canceled and appeared in the front.
(When commenting out -webkit-transform, z-index is properly working in below code)

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .test {
      width: 150px;
      height: 40px;
      margin: 30px;
      line-height: 40px;
      position: relative;
      background: white;
      -webkit-transform: rotate(10deg);
    }

    .test:after {
      width: 100px;
      height: 35px;
      content: &quot;&quot;;
      position: absolute;
      top: 0;
      right: 2px;
      -webkit-box-shadow: 0 5px 5px #999;
      /* Safari and Chrome */
      -webkit-transform: rotate(3deg);
      /* Safari and Chrome */
      transform: rotate(3deg);
      z-index: -1;
    }

&lt;!-- language: lang-html --&gt;

    &lt;html&gt;

    &lt;head&gt;
      &lt;title&gt;transform&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;transformtest.css&quot;&gt;
    &lt;/head&gt;

    &lt;body&gt;
      &lt;div class=&quot;test&quot;&gt;z-index is canceled.&lt;/div&gt;
    &lt;/body&gt;

    &lt;/html&gt;

&lt;!-- end snippet --&gt;

How do transform and z-index work together?

z-index is canceled by setting transform(rotate)

I would like to create a paradoxical effect via the `z-index` [CSS][1] property.

In my code I have five circles, like in the image below, and they are all absolutely positioned with no defined `z-index`. Therefore, by default, every circle overlaps the previous one.

Right now, circle 5 overlaps circle 1 (left image). The paradox I&#39;d like to achieve is to have, at the same time, circle 1 under the circle 2 and on top of circle 5 (as in  the right image).

[![][2]][2]  
&lt;sub&gt;(source: [schramek.cz](http://paradox.schramek.cz/1.jpg))&lt;/sub&gt;  


Here&#39;s my code

**Markup:** 

    &lt;div class=&quot;item i1&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;item i2&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;item i3&quot;&gt;3&lt;/div&gt;
    &lt;div class=&quot;item i4&quot;&gt;4&lt;/div&gt; 
    &lt;div class=&quot;item i5&quot;&gt;5&lt;/div&gt;

**CSS**

    .item {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border: 1px solid red;
        background: silver;
        border-radius: 50%;
        text-align: center;
    }
    
    .i1 { position: absolute; top: 30px; left: 0px; }
    .i2 { position: absolute; top: 0px; left: 35px; }
    .i3 { position: absolute; top: 30px; left: 65px; }
    .i4 { position: absolute; top: 70px; left: 50px; }
    .i5 { position: absolute; top: 70px; left: 15px; }


A live example is also available at http://jsfiddle.net/Kx2k5/.

I tried a lot of techniques with stacking orders, stacking context and so on. I read some articles about these techniques, but no success. How can I solve this?

  [1]: https://en.wikipedia.org/wiki/Cascading_Style_Sheets

 [2]: https://i.stack.imgur.com/5VKzJ.jpg

CSS z-index paradox flower

I have a `div` with default positioning (i.e. `position:static`) and a `div` with a `fixed` position.

If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

        #over {
          width: 600px;
          z-index: 10;
        }
        
        #under {
          position: fixed;
          top: 5px;
          width: 420px;
          left: 20px;
          border: 1px solid;
          height: 10%;
          background: #fff;
          z-index: 1;
        }


&lt;!-- language: lang-html --&gt;

        &lt;!DOCTYPE html&gt;
        &lt;html&gt;
           &lt;body&gt;
              &lt;div id=&quot;over&quot;&gt;
                 Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
              &lt;/div&gt;  
              &lt;div id=&quot;under&quot;&gt;
              &lt;/div&gt;
           &lt;/body&gt;
        &lt;/html&gt;


&lt;!-- end snippet --&gt;

Or on jsfiddle here: http://jsfiddle.net/mhFxf/

I can work around this by using 
`position:absolute`
on the static element, but can anyone tell me *why* this is happening?


(There seems to be a similar question to this one, (https://stackoverflow.com/questions/5182030/fixed-positioning-breaking-z-index) but it doesn&#39;t have a satisfactory answer, hence I am asking this here with my example code)

z-index not working with fixed positioning

I&#39;ve implemented a popup box that dynamically displays search options.  I want the box to &quot;float&quot; above all of the site content.  Currently, when the box is displayed it displaces all of the content below it and looks bad.  

I believe I&#39;ve already tried setting the z-index of the box&#39;s div to above that of the remaining page content, but still no luck.

  [1]: http://www.employeratlas.com/advancedsearch

Float a div above page content

I have two nested CSS elements. I need to get the parent to be on top, that is, above in z-axis, of the child element. Just setting z-index is not sufficient. 

I can&#39;t set a negative z-index on the child, that&#39;ll set it to below the page container on my actual page. Is this the only method?

http://jsbin.com/ovafo/edit

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .parent {
      position:  relative;
      width: 750px;
      height: 7150px;
      background: red;
      border: solid 1px #000;
      z-index: 1;
    }
    .child {
      position: absolute;
      background-color: blue;
      z-index: 0;
      color: white;
      top: 0;
    }
    .wrapper
    {
      position: relative;
      background: green;
      z-index: 10;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;parent&quot;&gt;
        parent parent
        &lt;div class=&quot;child&quot;&gt;
          child child child
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;


&lt;!-- end snippet --&gt;



How to get a parent element to appear above child

I&#39;m trying to track down a z-index problem.  I&#39;m looking at the page in IE9&#39;s DOM Inspector, and I just can&#39;t figure it out.

I have one element with a z-index of 10000, and another with a z-index of 7000, and yet the z-index 10000 is drawing below the z-index 7000.  Clearly somewhere in the hierarchy, something is setting a stacking context, but I&#39;ve been browsing up and down the hierarchy and I haven&#39;t been able to find it.

Nothing other than these two elements, so far as I can see, has a z-index set.  And nothing as a opacity value set. and I&#39;m seeing this in FF5 and IE9, so it&#39;s not the old IE&lt;7 stacking context bug.

Do any of the browsers have a tool that will tell me which element is setting a stacking context?

Thanks.

Is there a way to see the stacking context, in IE/Firefox/Chrome/etc.?


In order to set a div containing a transparent text image as the highest z-index in my document, I picked the number 10,000 and it solved my problem.

Previously I had guessed with the number 3 but it had no effect.

So, is there a more scientific way of figuring out what z-index is higher than that of all of your other elements?

I tried looking for this metric in Firebug but couldn&#39;t find it.

How can you figure out the highest z-index in your document?

So I&#39;m having nearly the exact same problem as [@Jamescoo][1] was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel.

Here&#39;s my exact setup replicated:  http://jsfiddle.net/ZBQ8U/2/

*BONUS: Feel free to grab the code for the sliding panel if you&#39;d like :)*

The z-indexes shouldn&#39;t conflict and their values would show that they are stacking correctly, but visually they are not.

Once you click the &#39;Open Modal&#39; button the `&lt;div class=&quot;modal-backdrop fade in&quot;&gt;&lt;/div&gt;` covers everything! (you&#39;ll have to re-run the code to reset it)

I don&#39;t know quite how to remedy this one...Any ideas? 


  [1]: https://stackoverflow.com/questions/10991085/bootstrap-modal-sitting-behind-backdrop-in-chrome

Bootstrap Modal sitting behind backdrop

I have a box-shadow on my `#primaryNav` div. Unfortunately, the shadow is being covered/hidden by the background of the following `#page` element.

I tried to set a z-index of 100 to `#primaryNav` and a z-index of -100 to #page, but that does not fix my problem.

Any ideas what I&#39;m doing wrong?




CSS box-shadow hidden (z-index does not fix)

I am trying to style a element with the `:after` pseudo element CSS selector

&lt;!-- language: lang-css --&gt;

    #element {
        position: relative;
        z-index: 1;
    }

    #element::after {
        position:relative;
        z-index: 0;
        content: &quot; &quot;;
        position: absolute;
        width: 100px;
        height: 100px;
    }

It seems like the `::after` element can not be lower then the element itself.

Is there a way to have the pseudo element lower then the element itself?

Is it possible to set the stacking order of pseudo-elements below their parent element?

I&#39;m using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.

It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.

If I have anything on the page with `position: relative` (like jquery ui accordion, or a google chart) then the drop down menu shows behind it.  Tried changing the `z-index` of the dd menu and of the nav-bar, but doesn&#39;t make any difference.

The only way I can get the menu to sit above the other content is to change the content to `position: fixed;` OR `z-index: -1;`  -but both of these solutions cause other problems.

Appreciate any help you can give me.

I think this is probably some standard issue with CSS positioning that I&#39;ve misunderstood, so haven&#39;t posted any code, but can do if needed.

Thanks.


z-index issue with twitter bootstrap dropdown menu

Is there a maximum / minimum possible value for the CSS `z-index` property? &lt;br/&gt;
Do different browsers have different maximum / minimum accepted values? &lt;br/&gt;
How will browsers handle a high / low value?

I thought I read somewhere once about a max `z-index` value. Maybe I&#39;m wrong. &lt;br/&gt;
Thanks in advance!

CSS - max z-index value

I&#39;m studying about [stacking contexts][1] and doing some tests with the properties that create a stacking context.

I did several tests and found that, in addition to `z-index`, of course, the following properties also create a stacking context:

- `transform` other than `none`;
- `opacity` other than `1`;
- And `perspective`.

Are there other properties that apply a stacking context?

  [1]: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context


Which CSS properties create a stacking context?

I&#39;m having trouble floating a div over an image. Here is what I am trying to accomplish: 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

        .container {
           border: 1px solid #DDDDDD;
           width: 200px;
           height: 200px;
        }
        .tag {
           float: left;
           position: relative;
           left: 0px;
           top: 0px;
           z-index: 1000;
           background-color: #92AD40;
           padding: 5px;
           color: #FFFFFF;
           font-weight: bold;
        }

&lt;!-- language: lang-html --&gt;

        &lt;div class=&quot;container&quot;&gt;
           &lt;div class=&quot;tag&quot;&gt;Featured&lt;/div&gt;
           &lt;img src=&quot;http://www.placehold.it/200x200&quot;&gt;
        &lt;/div&gt;


&lt;!-- end snippet --&gt;

In this image:

   ![enter image description here][1]

I want the &quot;Featured&quot; box to float over top of the image but instead it seems to &quot;clear&quot; the float and cause the image to wrap to the next line, as though it was displaying as a block element. Unfortunately, I can&#39;t figure out what I am doing wrong. Any ideas?

  [1]: http://i.stack.imgur.com/tJ2Tm.png

Floating Div Over An Image

I&#39;m coding a &quot;popup window&quot; in JavaScript and I&#39;ve come across an interesting thing:

![Cropped screenshot demonstrating strange stacking behavior][1]

The navy square under the popup window is visible even though I would expect it to be hidden. The popup was added after the square, so it should be on the top.

CSS `opacity` property of the navy square is `0.3`. From what I&#39;ve tried, it seems that every number from the interval `(0,1)` would yield the same result. If I change it to `1`, then it behaves as expected (i.e. the part of the square under the popup is hidden). 

I&#39;ve tried to set the `z-index` property to `10` for the square and `100` for the popup, but it doesn&#39;t change anything.

What am I missing? Why is part of square displayed?

Tested browsers:

- Firefox 3.6.x
- Chrome 4

  [1]: http://i.stack.imgur.com/gTQyq.png

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

I cannot get `z-index` working on a `iframe` that contains a pdf file with IE8. It works with Google Chrome.

Example ([JSFiddle](http://jsfiddle.net/5J6zL/9/)):

**HTML**

    &lt;div id=&quot;div-text&quot;&gt;
          &lt;div id=&quot;shouldBeOnTop&quot;&gt;my text that should be on top&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;div-frame&quot;&gt;
        &lt;iframe src=&quot;http://legallo1.free.fr/french/CV_JLG.pdf&quot; width=&quot;200&quot; height=&quot;200&quot;/&gt;
    &lt;/div&gt;

**CSS**

&lt;!-- language: lang-css --&gt;

    #div-text{
        position:relative;
        left:210px;
        top:20px
    }
    
    #shouldBeOnTop{
        position:relative;
        right:60px;
        background-color:red;
        width:100px;
        z-index:2;
    }
    
    #div-frame{
        position:relative;
         z-index:1;
    }

All Z Index Solutions on Gang of Coders

Total of 27 Z Index Solutions