Z-index in css not working

Question

This div

<div style="position: relative; z-index: 99;">123</div> 

shown higher than this

 <div style="position: fixed; z-index: 3000;">456</div> 

When I assign z-index: 98 in the first div everything is fine! If necessary, I can provide more code.

Answer 1

This is not the case on this fiddle: http://jsfiddle.net/kcgCX/

I think there should be something else in your code. he.

Answer 2

Does z-index orient the parent on it - are they both in the same parent? z-index implements its own stack - for example:

Box D, E and F are descendants of Box C → Box F (z-index: -1) are superimposed on field B (z-index: 1) because it is a descendant of field c (this one with z-index: 3 above by field b)

 <div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;"> <b>A:2</b><img src="hund.gif" width="208" height="181" alt="Hund"> </div> <div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;"> <b>B:1</b><img src="hund.gif" width="208" height="181" alt="Hund"> </div> <div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3; border:1px solid #888; background:#eee;"> <b>C:3</b> <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;"> <b>D:2</b><img src="hund.gif" width="208" height="181" alt="Hund"> </div> <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;"> <b>E:3</b><img src="hund.gif" width="208" height="181" alt="Hund"> </div> <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;"> <b>F:-1</b><img src="hund.gif" width="208" height="181" alt="Hund"> </div> </div> 

Answer 3

I think the problem may be that

 <div style="position: fixed; z-index: 3000;">456</div> 

has a fixed position according to this site: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html , z-indexes only work with relative or absolute position, so your other div works with your z-index.

If it is not, I would say that you did not create your HTML correctly.

Hope you find this helpful information helpful.

Answer 4

Protip: if you have a container small enought (Ej. 100px in height) and have children more (Ej, 200px), even if the z-index is well set, children won’t be completely visible if the container has overflow: hidden property .