z-index trong css không hoạt động

Question

này div

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

được hiển thị ở trên hơn thế này một

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

Khi tôi gán z-index: 98 trong lần đầu tiên div mọi thứ đều tốt! Tôi có thể cung cấp thêm mã nếu cần.

Answer 1

On fiddle này nó không phải là: http://jsfiddle.net/kcgCX/

Tôi nghĩ rằng nó phải là cái gì khác trong mã của bạn mà thay đổi. nó.

Answer 2

z-index đang định hướng ở cấp độ gốc - chúng có nằm trong cùng một thành phần gốc không? z-index triển khai ngăn xếp của riêng mình - ví dụ:

Hộp D, E và F là hậu duệ của Hộp C -> Hộp F (z-index: -1) phủ lên hộp B (chỉ mục z: 1) bởi vì đó là hậu duệ từ hộp c (cái này là với z-index: 3 trên hộp 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

tôi nghĩ rằng vấn đề có thể là

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

có vị trí cố định, theo đến trang web này: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html, chỉ mục z chỉ hoạt động với vị trí tương đối hoặc tuyệt đối, đó là lý do tại sao bạn div của cô ấy hoạt động với chỉ mục z của bạn.

Nếu đó không phải là trường hợp tôi muốn nói bạn không xây dựng đúng HTML của mình.

Hy vọng bạn sẽ thấy nội dung này hữu ích.

Answer 4

Protip: Nếu bạn có container đủ nhỏ (Ej. 100px chiều cao) và có chiều rộng hơn children (Ej, 200px), ngay cả với z-index well setted, vùng chứa có thuộc tính overflow: hidden.