z-index in css doesn't work

问题

This div

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

is shown above than this one

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

When i assign z-index: 98 in first div everything's fine! I can provide more code if needed.

回答1:

On this fiddle it isn't: http://jsfiddle.net/kcgCX/

I think it must be something else in your code that changes. it.

回答2:

z-index is orienting at it's parent - are they both in the same parent-element? z-index implements an own stack - for example:

The box D, E, and F are descendant from Box C -> Box F(z-index: -1) overlaid the box B (z-index:1) because it's the descendant from box c (this one is with z-index:3 over box b)

<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
      <b>A:2</b>
    </div>
    
    <div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
      <b>B:1</b>
    </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>
      </div>
    
      <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
        <b>E:3</b>
      </div>
    
      <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
        <b>F:-1</b>
      </div>
    </div>

回答3:

I think the problem might be that

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

has the position fixed, according to this site: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html, z-indexes only work with relative or absolute positions, that's why your other div does work with your z-index.

If that's not the case I'd say you did not build up your HTML correctly.

Hope you find this intel useful.

回答4:

Protip: If you have a container small enought (Ej. 100px of height), and have a children bigger (Ej, 200px), even with z-index well setted, the children won't be fully visible if the container has the property overflow: hidden.

来源：https://stackoverflow.com/questions/9377029/z-index-in-css-doesnt-work

标签

css

z-index