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
596
votes
12 answers

Minimum and maximum value of z-index?

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…
Sachin Gaur
  • 12,909
  • 9
  • 33
  • 38
511
votes
8 answers

z-index not working with fixed positioning

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. #over { width: 600px; z-index:…
DanSingerman
  • 36,066
  • 13
  • 81
  • 92
386
votes
9 answers

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

I am trying to style a element with the :after pseudo element CSS selector #element { position: relative; z-index: 1; } #element::after { position:relative; z-index: 0; content: " "; position: absolute; width: 100px; …
adardesign
  • 33,973
  • 15
  • 62
  • 84
306
votes
10 answers

Why does z-index not work?

So if I understand z-index correctly, it would be perfect in this situation: I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this? z-index:-1 // on the image…
Linkjuice57
  • 3,473
  • 6
  • 24
  • 23
274
votes
9 answers

How to set iPhone UIView z index?

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?
Tattat
  • 15,548
  • 33
  • 87
  • 138
264
votes
13 answers

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

I have a linear layout which consists of imageview and textview , one below another in a linear layout.
sat
  • 40,138
  • 28
  • 93
  • 102
239
votes
18 answers

How to use z-index in svg elements?

I'm using the svg circles in my project like this, …
Karthi Keyan
  • 4,243
  • 5
  • 24
  • 47
163
votes
11 answers

IE7 Z-Index Layering Issues

I've isolated a little test case of IE7's z-index bug, but don'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: input { border: 1px solid #000; } div { border: 1px solid…
rezna
  • 2,243
  • 2
  • 17
  • 16
130
votes
6 answers

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

Suppose I have this code:
Hello world
This jsFiddle: http://jsfiddle.net/ZjXMR/ Now, I need to have
in above of
Afshin Mehrabani
  • 33,262
  • 29
  • 136
  • 201
118
votes
4 answers

Bring element to front using CSS

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails. Here's example- #header { background: url(http://placehold.it/420x160) center top…
Stylock
  • 1,459
  • 2
  • 12
  • 14
116
votes
3 answers

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

i'm trying to use a drop shadow to make it look like one div (the header) is "above" another. my problem is that the "middle" div is covering the drop shadow. i tried using z-index to put the header div about the middle div, but it's not working…
vee
  • 1,167
  • 2
  • 8
  • 6
115
votes
7 answers

z-index is canceled by setting transform(rotate)

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) .test { width: 150px; height: 40px; margin: 30px; line-height: 40px; …
kbth
  • 1,155
  • 2
  • 8
  • 7
99
votes
6 answers

CSS z-index paradox flower

I would like to create a paradoxical effect via the z-index CSS 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…
1ubos
  • 1,126
  • 9
  • 11
97
votes
7 answers

How to get a parent element to appear above child

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't set a negative z-index on the child, that'll set it to below the page container…
Jourkey
  • 33,710
  • 23
  • 62
  • 78
94
votes
6 answers

Float a div above page content

I've implemented a popup box that dynamically displays search options. I want the box to "float" 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've already…
Eric Di Bari
  • 3,767
  • 7
  • 40
  • 49
1
2 3
…
99 100