Tại sao z-index không hoạt động đối với div?

Question

Tôi đang cố gắng để có được chân của tôi để hiển thị trên đầu trang của nền footer, nhưng z-index dường như không được làm việc. Có ai thấy điều gì sai với nó không? http://jsfiddle.net/f2ySC/

Answer 1

Bạn phải rõ ràng xác định position tài sản:

.footerBox { 
    background-color: #FFFFFF; 
    border: 10px solid #DDDDDD; 
    margin: 10px 0 -200px -10px; 
    width: 1185px; 
    z-index: 1000; 

    position:relative; 

} 

http://jsfiddle.net/f2ySC/1/

---

này mang chân vào current stacking context:

... Gốc các dạng phần tử bối cảnh xếp chồng gốc. Các bối cảnh khác xếp chồng được tạo bởi bất kỳ phần tử định vị nào (bao gồm các phần tử vị trí tương đối ) có giá trị được tính là 'z-index' khác với 'tự động'. Các ngữ cảnh xếp chồng không nhất thiết liên quan đến các khối chứa . Trong mức độ tương lai của CSS, các tài sản khác có thể giới thiệu bối cảnh xếp chồng, ví dụ 'opacity' ...

http://www.w3.org/TR/CSS2/visuren.html#z-index

Answer 2

On footerBox thiết lập các thuộc tính position để absolute mã mới của bạn nên đọc như sau

.footerBox { 
    background-color: #FFFFFF; 
    border: 10px solid #DDDDDD; 
    margin: 10px 0 -200px -10px; 
    width: 1185px; 
    z-index: 1000; 
    position: absolute; 
} 

Xem một bản demo here

hệ ing position: relative cũng hoạt động

Answer 3

Đây có phải là hiệu ứng bạn đang tìm kiếm không? Updated example

tôi thêm position: relative;-#footerBack và .footerBox để cho phép z-index

Answer 4

sử dụng lợi nhuận tiêu cực không phải là một thực hành tốt. z-index: -1; hoạt động nó chỉ hiển thị nội dung trên nền của div khác :)