cách buộc phần tử lên trên cùng khi chỉ mục z không hoạt động?

Question

Tôi đang viết một tiện ích mở rộng bằng chrome sử dụng tính năng tiêm để sửa đổi phần tử trong trang web mục tiêu. Tôi muốn hiển thị bong bóng tin nhắn khi con trỏ di chuyển trên một phần tử. Nhưng tôi gặp phải một vấn đề mà đôi khi bong bóng tin nhắn bị ẩn bởi một số yếu tố khác. Tôi thấy rằng đó là vì chỉ mục z sẽ không hoạt động nếu phần tử B nằm trên phần tử A, phần tử con của phần tử A (bong bóng thông điệp) không bao giờ có thể cao hơn phần tử B.

Để minh họa, ở đây là một ví dụ. Obj2 đó sẽ luôn bị ẩn bởi obj3, mặc dù chỉ số z obj2 là 1000000.

Có giải pháp nào cho nó không?

.aaa{ 
    background-color:blue; 
    width:100px; 
    height:100px; 
} 
.ccc{ 
    background-color:red; 
    width:80px; 
    height:80px; 
    z-index:1000000; 
} 
.bbb{ 
    background-color:green; 
    position:relative; 
    top:-50px; 
    left:50px; 
    width:100px; 
    height:100px; 
} 

<div> 
    <section id=obj1 class="aaa"> 
    <article id=obj2 class="ccc"> 
    </article> 
    </section> 
</div> 
<section id=obj3 class="bbb"> 
</section> 

Answer 1

z-index chỉ được áp dụng khi container cũng được đánh dấu là position: relative/tuyệt đối. Nếu bạn thay đổi quy tắc ccc của bạn như sau nó sẽ làm việc một cách chính xác:

.ccc{ 
    position: relative; 
    background-color:red; 
    width:80px; 
    height:80px; 
    z-index:1000000; 
} 

http://jsfiddle.net/RrUbh/