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
48
votes
4 answers

how to use z-index with relative positioning?

I have a problem with z-index and my code. I want to have a popup on every row, positioned relative to that row. So I created this code: .level1 { position:relative; z-index:2; } .level2 { …
Chris Vaarhorst
  • 497
  • 1
  • 4
  • 4
48
votes
7 answers

How to get a child element to show behind (lower z-index) than its parent?

I need a certain dynamic element to always appear on top of another element, no matter what order in the DOM tree they are. Is this possible? I've tried z-index (with position: relative), and it doesn't seem to work. I need:
…
dclowd9901
  • 6,756
  • 9
  • 44
  • 63
45
votes
4 answers

Difference between auto, 0, and no z-index?

What is the difference between: z-index: auto z-index: 0 no z-index at all All the above scenarios are for a div that encloses two divs, div1 and div2 each having a z-index which is 9 and 10 respectively. The enclosing div is in the stacking…
bluelurker
  • 1,353
  • 3
  • 19
  • 27
44
votes
2 answers

How do I change the z index or stack order of UIView?

I've stacked a UIView on top of an existing controller in an effort to create a gradient layer. However, when I load the view the new UIView (naturally) is on top of everything. Relevant Code: class ViewController: UIViewController { @IBOutlet…
Dan Beaulieu
  • 19,406
  • 19
  • 101
  • 135
43
votes
11 answers

How to find the highest z-index using jQuery

I have a number of div elements with different z-index. And I want to find the highest z-index among these divs - how can I achieve it? CSS: #layer-1 { z-index: 1 } #layer-2 { z-index: 2 } #layer-3 { z-index: 3 } #layer-4 { z-index: 4 } HTML:
Run
  • 54,938
  • 169
  • 450
  • 748
43
votes
5 answers

FF3/Windows CSS z-index problem with YouTube player

I'm stuck on what appears to be a CSS/z-index conflict with the YouTube player. In Firefox 3 under Windows XP, Take a look at this page: http://spokenword.org/program/21396 Click on the Collect button and note that the pop-up
appears under the…
Doug Kaye
  • 1,565
  • 5
  • 23
  • 32
42
votes
1 answer

click link below a higher z-index div

Possible Duplicate: Passing mouse clicks through an overlaying element
Is it possible to click the link below the red square without javascript? The red div doesn't need to be clickable. http://jsfiddle.net/efortis/LNwHV/ #bottom{ width:…
Eric Fortis
  • 16,372
  • 6
  • 41
  • 62
41
votes
10 answers

display view on top of action bar

Is there a way to render a view on top of the action bar? I want to create a small tip box that will point the user to an item in the action bar. I know that a Toast with a set view will be rendered above the action bar. Does anyone know how to do…
lunaleaps
  • 426
  • 1
  • 5
  • 9
37
votes
6 answers

Can't change z-index with JQuery

I, for some reason, can't change the zIndex of an element using jQuery. I've searched all of this website and Google but couldn't find the right answer. I am trying to put my element in front of another div when clicking a button. I used the code…
Danny Postma
  • 389
  • 1
  • 3
  • 8
34
votes
6 answers

Java Swing - how to show a panel on top of another panel?

I wish to have an internal (non window) dialog to ask for member input. I would like the dialog to be placed centrally on an existing JPanel. I have looked at layeredpanes and these seem unusable due to only having a single layout manager (or no…
Pool
  • 11,999
  • 14
  • 68
  • 78
34
votes
6 answers

Setting z-index on draggable elements

I am trying to set the z-index on draggable elements using jQuery. You can see what I am talking about and what I have so far here: http://jsfiddle.net/sushik/LQ4JT/1/ It is very primitive and there are problems with it. Any ideas on how I would…
Zac
  • 12,637
  • 21
  • 74
  • 122
34
votes
5 answers

Why is overflow interacting with z-index?

I am trying to understand the rules behind z-index and how it interacts with the overflow property. I have this html:
Here is some text to keep things interesting
And…
Andrew Eisenberg
  • 28,387
  • 9
  • 92
  • 148
34
votes
1 answer

can I override z-index inheritance from parent element?

Is there any way to override z-index inheritance from parent elements when using absolute position. I want 2222 div to be on top of 0000 div:
OOOO
Marek
  • 2,419
  • 6
  • 34
  • 38
33
votes
6 answers

What is default z-Index of

So normally we can get z-Index value of a div element using, e.g: var zindex = document.getElementById('id').style.zIndex; I am using this value in my code to do something. Now the problem is with default values where there is nothing defined in…
Johnydep
  • 6,027
  • 20
  • 57
  • 74
33
votes
4 answers

Link using z-index can't be clicked even though it's on top, in both Firefox & IE

I'm trying to get a text link to appear on top of a partly-transparent image, which in turn is on top of a plain coloured background. I want the link-text and image to print when the page is printed, but not the coloured background. (Which is why…
Alex
  • 1,061
  • 2
  • 11
  • 19
1 2
3
…
99 100