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
1
vote
0 answers

Embedded youtube video z-index in IE 9 (It was working earlier)

I have embedded youtube video in my site using iframe tag. I also having some fixed navigation in my site. While scrolling the page on IE iframe youtube videos are overlapping the fixed navigation which is having more z-index. I have tried the below…
RAN
  • 1,443
  • 3
  • 19
  • 30
1
vote
2 answers

How can I position overlapping divs to look like a stack of papers?

I want to layer multiple divs, such that each successive one is offset up and to the left of the one in front of it. It should roughly look like a stack of papers. I've tried playing around with absolute positioning and z-index, but the positioning…
GetOffMyLawn
  • 1,362
  • 4
  • 14
  • 21
1
vote
2 answers

Weird CSS effect with box shadows - how to solve?

See this example: I have several boxes with white background and huge black, translucent box shadows that overlap the boxes above. However, this leads to an irritating behavior: While the white background gets darker through the overlapping box…
Aloso
  • 5,123
  • 4
  • 24
  • 41
1
vote
1 answer

Z-index/layering issues

z-index doesn't seem to work for me. I've googled but can't seem to find the problem. I want the .navigation css class to have a lower z-index than the css class .mobilenav and .mobilenavclosed so that these classes are layered above the other.…
andrea
  • 103
  • 3
  • 14
1
vote
2 answers

Why is menu displaying behind image?

At this site: http://www.multiway.dk/ The dropdown menu is displaying behind the header image, which i dont quite understand as the menu has z-index: 100; and the image has z-index:1; It works fine in FF, but in IE it doens't work??
user431619
1
vote
2 answers

Z-index on nested float not working

I'm trying to achieve a sliding-door effect on a span contained within an h2 element. The h2 element has position set to relative in order to enable z-index, so far so good. The span is floated to the right within this h2 element and has a z-index…
slackexchange
  • 55
  • 1
  • 9
1
vote
2 answers

CSS z-index not working with relative positioning

I have some divs like so:
…
Vijay Singh
  • 277
  • 1
  • 3
  • 15
1
vote
3 answers

z-index a pseudo-element box-shadow behind a parent element

I'm trying to place the :before,:after box-shadow behind the button. But the transition is starting in front of the a tag. For my works CMS, I'll need all the properties to be on the a tag. Join Today .btn{ position:…
Colin Leahy
  • 11
  • 5
1
vote
0 answers

Android - how to implement elevation/z-order in AbsoluteLayout?

I'm new to Android programming and want to create my own piano app. I use absoluteLayout with dp - or is there a better way? I have buttons declared like this
1
vote
1 answer

z-index example on jsfiddle not working, absolutely baffeling

Everything looks like it was done correctly. The 'Loading Image' is supposed to have a lower z-index (be behind of) the image. Why it is not working is beyond me it all looks ok to me. Have a go at it: https://jsfiddle.net/yjwxdmw3/
user5922482
  • 23
  • 4
1
vote
1 answer

How to make canvas line drawings above image?

Basically, I'm creating a matching game. When I select an item(e.g. pear as seen in picture), it will translate to the right. However, it will end up being on top of the line drawn on the canvas. I want the line to be on top of the image and not the…
CHEWWWWWWWWWW
  • 169
  • 3
  • 20
1
vote
0 answers

How tags with the same z-index work

Suppose that I added two tags with the same z-index attribute in its style (for example, 300). I noticed that in Chrome the last element I've added will be on the top. Is it guaranteed?
FrozenHeart
  • 19,844
  • 33
  • 126
  • 242
1
vote
2 answers

How to clear z-index rule in the last div?

I have the following problem: I'm working on this site and using a picture as a background of 1 div. Inside this div I have another 2 dives - logo and navigation. Last /outside of the div with the picture/ is the footer, whos background must be…
pantofche
  • 11
  • 1
  • 3
1
vote
1 answer

Positioning moving

OK, so I have these background
s which pan left and right using the jQuery plugin, spritely. So, I was wondering what the best way to position them was. I obviously have specified both of the two
s which each contains one background image…
Qcom
  • 18,263
  • 29
  • 87
  • 113
1
vote
1 answer

Issues with getting layer to show as transparent until displayed with z-index

I have a couple sets of layers that are all set to position: absolute; and they display over each other. I have delays and fadeOut's in place so it acts in sequence. For some reason on my last display layer, if I set the z-index to a number that is…
Becky
  • 2,283
  • 2
  • 23
  • 50
1 2 3
…
99
100