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
33
votes
6 answers

z-index and iFrames!

I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page. On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the…
cqde
  • 331
  • 1
  • 3
  • 3
33
votes
3 answers

Override CSS Z-Index Stacking Context

I'm trying to override / ignore the stacking context for an element so it can be positioned on the z-axis relative to the page root. However, according to the article What No One Told You About Z-Index: If an element is contained in a stacking…
KyleMit
  • 30,350
  • 66
  • 462
  • 664
32
votes
2 answers

Why is z-index ignored with position:static?

See this comment from jquery-ui // Ignore z-index if position is set to a value where z-index is ignored by the browser // This makes behavior of this function consistent across browsers // WebKit always returns auto if the element is positioned I…
ripper234
  • 222,824
  • 274
  • 634
  • 905
32
votes
5 answers

Z-Index not working on Safari - fine on Firefox and Chrome

The Z-index isn't rendering properly on Safari - but it is working fine on Chrome and Firefox. I can't figure out what the Safari specific bug would be. Here is the relevant code: .flex-container{ display: inline-flex; …
manicatorman
  • 341
  • 1
  • 3
  • 5
31
votes
4 answers

CSS Floating with Overlap

I'm trying to set up a simple horizontal tab structure for a page I'm working on, and I'm running into some trouble with floating div's combined with z-index. Viewing the following code in a browser:
Michael
  • 1,133
  • 3
  • 15
  • 30
31
votes
7 answers

How to make a Div appear on top of everything else on the screen?

Edit to reopen: It seems to be difficult to position elements over a google map. Using z-index does not solve the problem which is described below: Google Maps will stay on top of some other elements even when using high z-indexes. The question…
jordan
  • 3,436
  • 11
  • 44
  • 75
30
votes
7 answers

-transform:scale causing 'blinking' when hovering

I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering. Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I…
Tony Beninate
  • 1,926
  • 1
  • 24
  • 44
29
votes
2 answers

How do I set the z-index of a marker in Google Maps API v3

Can anyone explain the exact syntax used to set the z-index for a marker using the Google Maps API (Version 3)?
Zabs
  • 13,852
  • 45
  • 173
  • 297
29
votes
3 answers

Z-index on borders

I have been searching around for a way to add z-index to borders but can't seem to find one so I thought I'd ask here. Say I have a div with a parent div. The parent has a border and I want that border to overlap the child div but I don't want the…
ItsNotAbyss
  • 315
  • 1
  • 3
  • 6
29
votes
4 answers

How to "z-index" to make a menu always on top of the content

I have a problem and I can't figure how to correct this. What I want is that the "Red box" stay on top of the page in a z-index 2, while the all the content on the background stay on index 1 but somehow this code is "collapsing" the layers. If…
rmz
  • 507
  • 2
  • 6
  • 11
28
votes
2 answers

Strange z-index behavior with scrollbars under Chrome

Using z-index CSS property on 'fixed' positioned elements gives me a strange behavior under Chrome. When Firefox and Opera browsers give me the awaited result, Chrome does not seem to respect the z-index property, displaying the scrollbar above the…
Vincent Batoufflet
  • 282
  • 1
  • 3
  • 7
28
votes
2 answers

While scrolling on an iOS device, the z-index of elements isn't working

My layout is fairly simple, a repeating background element, a couple of vertical spaces (roads) and some horizontal bridges and a little car which should drive underneath them when you scroll. Everything works just fine on my Mac but on iOS devices…
Jannis
  • 17,025
  • 18
  • 62
  • 75
27
votes
5 answers

Control z-index in Fabric.js

In fabricjs, I want to create a scene in which the object under the mouse rises to the top of the scene in z-index, then once the mouse leaves that object, it goes back to the z-index where it came from. One cannot set object.zindex (which would be…
Ian
  • 271
  • 1
  • 3
  • 3
26
votes
2 answers

Z-index with before pseudo-element

I've created a 'header' element with a before-pseudo element. the pseudeo element must be behind the parent element. Everything works great till the moment I give my 'header' a z-index. What I want: The yellow 'header' on the foreground, the red…
Tom Claus
  • 1,301
  • 1
  • 9
  • 13
25
votes
4 answers

iOS not respecting z-index with -webkit-overflow-scrolling

Problem: On iOS the z-index of a scrollable area is ignored when using -webkit-overflow-scrolling. If two objects with -webkit-overflow-scrolling overlap the lower one is scrolled instead of the one being displayed above. How to reproduce: Create…
Aides
  • 3,643
  • 5
  • 23
  • 39
1 2 3
…
99 100