CSS IE7 z-index

Question

I'am cố gắng để tạo ra đồ họa như thế này:

Nhưng tôi nhận được:

CSS:

#green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; } 
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; } 
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;} 

HTML:

<div id="blue"></div> 
<div id="green"> 
    <div id="red"></div> 
</div> 

Vấn đề chính là mã html cần phải chắc chắn như tôi chỉ định ở trên. Vui lòng cho tôi lời khuyên về mã CSS nào tôi cần để triển khai tính năng này (phải tương thích với IE7 +). Hoặc có lẽ JS sẽ giúp cho việc này? Tôi sẽ rất vui vì lời khuyên nào.

Answer 1

Thuộc tính CSS z-index chỉ liên quan đến các phần tử tồn tại ở cùng cấp trong phân cấp DOM. Do đó giá trị z-index được đặt trên màu đỏ không liên quan. Chỉ có chỉ số z về chất màu xanh và màu xanh lá cây. Chỉ số z của chỉ số xanh cao hơn chỉ số xanh lục xuất hiện ở trên cùng. Trong khi phản trực giác, nó tuân thủ đặc tả.

Tôi không có bản sửa lỗi không liên quan đến việc sửa đổi HTML, tĩnh hoặc trong thời gian chạy bằng JavaScript. Ví dụ. nếu màu đỏ xuất hiện ở cùng cấp với màu xanh và màu xanh lá cây thì nó sẽ hoạt động tốt.

Answer 2

Điều này dễ hơn là bạn đang làm cho nó ra được. Nếu bạn lồng từng div vào nhau, bố cục sẽ tự xử lý. Có một JSFiddle here với mã bên dưới:

<div id="green"> 
    <div id="blue"> 
     <div id="red"></div> 
    </div> 
</div> 

---

#green 
{ 
    width: 400px; 
    height: 400px; 
    background: green; 
    position: absolute; 
} 

#green #blue 
{ 
    width: 300px; 
    height: 300px; 
    background: blue; 
} 

#green #blue #red 
{ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

Answer 3

Loại bỏ z-index quy tắc cho div xanh might do the trick. Vấn đề là nó sẽ không hoạt động trong IE7. IE8 + và những người khác, tuy nhiên, nên được tốt.

Answer 4

Tất cả những gì bạn phải làm là xóa position: absolute từ #green (z-index trên div này cũng trở thành không cần thiết sau đó). Hoạt động trên tất cả các trình duyệt bao gồm IE6 và IE7.

Fiddle: http://jsfiddle.net/PD83G/.