Z-Index không có vị trí tuyệt đối

Question

Là kết quả của thủ thuật CSS như lề tiêu cực, đôi khi tôi có một số HTML được hiển thị bên dưới nội dung HTML xảy ra sau trong tài liệu HTML. Mặc dù các yếu tố ban đầu về mặt kỹ thuật nên ở bên dưới các phần tử sau, tôi muốn hiển thị các phần tử ở trên.

Có thể tạo phần tử HTML xuất hiện phía trên phần tử khác mà không phải chỉ định vị trí tuyệt đối không? Nó không xuất hiện mà chỉ số z có bất kỳ hiệu ứng mà không có một vị trí tuyệt đối.

Answer 1

Có: sử dụng position:relative; z-index:10.

z-index không có hiệu lực đối với position:static (mặc định).

Lưu ý rằng chỉ mục z không phải là hệ thống phân lớp toàn cầu, nhưng chỉ phân biệt thứ tự trong mỗi cha mẹ được định vị. Nếu bạn có:

<style type="text/css"> 
    div { position:relative } 
    #a { z-index:1 } 
    #a1 { z-index:99 } 
    #b { z-index:2 } 
</style> 
... 
<div id="a"><div id="a1">SUPER TALL</div></div> 
<div id="b">I WIN</div> 

... sau đó #a1 sẽ không bao giờ làm cho trên b, vì #b được xếp lớp trên #a. Bạn có thể xem bản trình diễn này tại số http://jsfiddle.net/DsTeK

Answer 2

Tôi biết câu trả lời của Phrogz đã được chấp nhận và câu trả lời hay nhưng chỉ dành cho bản ghi: bạn không cần phải luôn z-index.

Khi bạn có position:relative trên một phần tử, nó cũng sẽ được hiển thị trên đầu tất cả các phần tử khác không có position (hoặc position:static). Thậm chí nếu bạn không có bất kỳ chỉ mục z nào cả!

jsFiddle.