lỗi chrome z-index

Question

Tôi đang gặp một lỗi thực sự gây phiền nhiễu dường như chỉ xảy ra trên Windows và OS X: chỉ mục z của một phần tử có cha mẹ có vị trí cố định không hoạt động trên Chrome! Tôi chuyển đổi tình hình kỳ lạ của tôi để một mã đơn giản:

html:

<div id="mask"> 
    &nbsp; 
</div> 

<div id="box"> 
    <div class="below-mask circle"> 
     should be below the mask 
    </div> 

    <div class="above-mask circle"> 
     should be above the mask 
    </div> 
</div>​ 

css:

body { 
    font-family: Verdana; 
    font-size: 9px; 
    margin: 0px; 
} 

#box { 
    position: fixed; 
} 

#mask { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background-color: rgba(0, 0, 0, 0.5); 
    width: 100%; 
    height: 100%; 
    z-index: 9998; 
} 

.circle { 
    position: relative; 
    background-color: rgba(255, 204, 0, 0.75); 
    border-radius: 75px; 
    line-height: 150px; 
    margin: 50px; 
    text-align: center; 
    width: 150px; 
    height: 150px; 
} 

.above-mask { 
    z-index: 9999; 
} 

.below-mask { 
    z-index: 9997; 
}​ 

sandbox: http://jsfiddle.net/gibatronic/umbgp/

tôi thử nghiệm trên trình duyệt Internet Explorer 9, Firefox 15, Opera 12.02 và Safari 5.1.7 trên OS X và Windows và tất cả chúng được hiển thị như mong đợi. Tôi cũng đã thử nghiệm trên Ubuntu 12.10 và nó hoạt động tốt cho mọi trình duyệt bao gồm cả Chrome! Tôi thậm chí còn thử nghiệm trên trình duyệt Kindle 4 và nó đã hoạt động!

Tôi tự hỏi nếu có ai biết bất kỳ loại sửa chữa nào để khắc phục sự cố này!

Answer 1

câu trả lời của one800higgins nằm dọc theo dòng bên phải. Câu trả lời thực sự là on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto.Vì vậy, hệ thống phân cấp bối cảnh xếp chồng trông như thế này:

• gốc tài liệu (z-index 0)
  • #mask (z-index 9998)
  • #box (z-index 0)
    • .above-mask (z-index 9999)
    • .below-mask (z-index 9997)

Điều đó có nghĩa rằng 9998 không bao giờ so với 9999 hoặc 9997 để xác định xếp theo thứ tự. Thay vào đó, 9999 được so sánh với 9997 để xác định các .above-mask và .below-mask là tiếp tục ở phía trước, và sau đó một lần tất cả mọi thứ bên trong #box được xếp chồng lên nhau trong bối cảnh đó, nó được xem như một lớp duy nhất tại z-index 0 mà được xếp chồng lên nhau đằng sau #mask tại z- chỉ số 9998.

này cũng giải thích tại sao @ câu trả lời TheNextBillGates của di chuyển #mask bên #box công trình - bởi vì sau đó #mask là trong bối cảnh sắp xếp giống như .above-mask và .below-mask. Tôi rất khuyên bạn nên liên kết ở trên để biết thêm chi tiết toàn diện, và bạn cũng nên xem the announcement for the stacking change for fixed elements in Chrome.

Answer 2

Thay đổi hoặc xóa position: fixed trên #box và bạn đã đặt.

jsFiddle

Answer 3

Tôi vừa bắt gặp lỗi này, và nó vẫn xảy ra trong Google Chrome v26. Tôi có thể đặt chỉ mục z cao như tôi muốn từ mã hoặc trình chỉnh sửa CSS của Chrome và nó không tạo sự khác biệt (và vị trí của phần tử được đặt thành tuyệt đối). Cài đặt chỉ mục z tương tự đã hoạt động như mong đợi trong Firefox và thậm chí cả IE8-IE10. Khi tôi chuyển phần tử gốc từ vị trí: cố định thành vị trí: tuyệt đối thì chỉ mục z của phần tử con hoạt động tốt trong Chrome.

Answer 4

Nếu bạn di chuyển #mask bên trong của #box nó hoạt động tốt.

<div id="box"> 
    <div id="mask">&nbsp;</div> 
    <div class="below-mask circle">should be below the mask</div> 
    <div class="above-mask circle">should be above the mask</div> 
</div> 

Dưới đây là một fiddle http://jsfiddle.net/TheNextBillGates/jKm4b/

Không chắc tại sao điều này là chỉ được nêu ra.

Answer 5

Gán chỉ mục z cho div cố định của bạn. Điều đó sẽ khiến chrome tôn trọng các giá trị z-index cho tất cả các con của nó.

Answer 6

Nhiều ngăn xếp chỉ mục z là không may và khó hiểu, tuy nhiên bạn có thể giải quyết vấn đề này mà không thay đổi cấu trúc html nếu bạn tăng chỉ mục z của bất kỳ phụ huynh nào của thành phần đích. Cố gắng tìm một yếu tố cha mẹ là anh chị em của yếu tố phiền hà chồng chéo nội dung của bạn. Áp dụng kiểu tóc này:

position: relative; z-index: [# higher than overlapping element's z-index]; 

Mức milage của bạn có thể thay đổi tùy theo dự án của bạn, tuy nhiên giải pháp này làm việc cho dự án của tôi.

Answer 7

Tôi nghĩ rằng nó không phải ở dưới cùng của trang như các cửa sổ phương thức giả sử. Dễ dàng sửa chữa là chỉ cần lấy tất cả các cửa sổ phương thức và ném chúng vào một div trước khi thẻ body kết thúc. Ví dụ dưới đây khắc phục mọi vấn đề về chrome mà tôi có.

$('body').append('<div id="modelContainer" />'); 
$('.modal').each(function() { 
    $(this).appendTo('#modelContainer'); 
})