Stack Overflow
Stack Overflow

Questions tagged [z-index]

z-index represents the order on the z-plane in which an element appears. An element with higher stack order is always in front of another element with lower stack order. It is available in most of the GUI frameworks (both Web and Desktop).

In CSS

z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order.

p {
    position: relative;
    z-index: -1;
}

This paragraph will be positioned behind the rest of the page, as long as the rest of the page has z-index: 0, which is specified by default.

Negative stack orders can also be used in the same manner. A negative value will appear behind a more positive one. z-index only works on elements that have a position value (i.e. position: relative;). Like all other CSS properties, it can be set with as well with the following syntax:

object.style.zIndex = "1";

In WPF

Panel.ZIndex Attached Property

In Silverlight

Canvas.ZIndex Attached Property

See also regarding the general concept.

4055 questions
90
votes
6 answers

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

I'm trying to track down a z-index problem. I'm looking at the page in IE9's DOM Inspector, and I just can'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…
Jeff Dege
  • 11,190
  • 22
  • 96
  • 165
78
votes
22 answers

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

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…
Charlie Kotter
  • 1,849
  • 3
  • 16
  • 13
77
votes
32 answers

Bootstrap Modal sitting behind backdrop

So I'm having nearly the exact same problem as @Jamescoo 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's my exact setup replicated: …
WizzyBoom
  • 920
  • 1
  • 8
  • 18
72
votes
3 answers

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

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…
Tophers
  • 721
  • 1
  • 5
  • 3
68
votes
6 answers

Floating Div Over An Image

I'm having trouble floating a div over an image. Here is what I am trying to accomplish: .container { border: 1px solid #DDDDDD; width: 200px; height: 200px; } .tag { float: left; position:…
Jeremy Harris
  • 24,318
  • 13
  • 79
  • 133
67
votes
8 answers

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

I'm coding a "popup window" in JavaScript and I've come across an interesting thing: 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…
MartyIX
  • 27,828
  • 29
  • 136
  • 207
63
votes
16 answers

z-index issue with twitter bootstrap dropdown menu

I'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…
Leon
  • 1,793
  • 2
  • 18
  • 20
62
votes
1 answer

Which CSS properties create a stacking context?

I'm studying about stacking contexts 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…
jotavejv
  • 1,936
  • 2
  • 16
  • 16
61
votes
3 answers

CSS - max z-index value

Is there a maximum / minimum possible value for the CSS z-index property? Do different browsers have different maximum / minimum accepted values? How will browsers handle a high / low value? I thought I read somewhere once about a max z-index…
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
60
votes
4 answers

Z-Index Relative or Absolute?

I'm trying to find an answer to the following question: Is an element's z-index style its absolute stack order, or its stack order relative to its parent? For instance, suppose I have the following code:
Tom Murray
  • 601
  • 1
  • 5
  • 3
59
votes
2 answers

CSS negative z-index: what does it mean?

What is the expected effect according to the standards, if I add a negative integer value to the z-index property of an element? I searched for the answer but only have found this: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index The…
Herbertusz
  • 1,151
  • 1
  • 11
  • 19
59
votes
4 answers

Placing absolute behind relative positioned element

I have two elements in the same container, the first has position: absolute, the second position: relative. Is there a way to set the "z-index" of an absolute element so that its in the background? The relative positioned element should be on the…
Luca Nate Mahler
  • 1,292
  • 2
  • 13
  • 28
59
votes
4 answers

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

I cannot get z-index working on a iframe that contains a pdf file with IE8. It works with Google Chrome. Example (JSFiddle): HTML
my text that should be on top
…
Corinne Kubler
  • 2,072
  • 5
  • 22
  • 34
50
votes
2 answers

Inset box-shadow beneath content

I don't understand why, but an inset box shadow is beneath my content. Here's an example: div { box-shadow:inset 0 0 10px black; height:300px; color:red; }
a
http://jsfiddle.net/MAckM/ You see the a is on top of…
henryaaron
  • 6,042
  • 20
  • 61
  • 80
49
votes
4 answers

Why can't an element with a z-index value cover its child?

Today after hours of debugging, I learned in the hard way that: A parent element is never able to cover (stack on top of) its child element if the parent has a z-index of any value, no matter how you change the child's CSS How can I understand this…
ZYinMD
  • 3,602
  • 1
  • 23
  • 32
1
2
3
…
99 100