Tại sao z-index không hoạt động?

Vì vậy, nếu tôi hiểu z-indexchính xác, nó sẽ hoàn hảo trong tình huống này:

Tôi muốn đặt hình ảnh dưới cùng (thẻ / thẻ) bên dưới div phía trên nó. Vì vậy, bạn không thể nhìn thấy các cạnh sắc nét. Làm thế nào để tôi làm điều này?

z-index:-1 // on the image tag/card

hoặc là

z-index:100 // on the div above

cũng không hoạt động. Không có sự kết hợp của bất cứ điều gì như thế này. Làm thế nào mà?

Các z-indexbất động sản chỉ hoạt động trên các yếu tố với một positiongiá trị khác hơn static(ví dụ position: absolute;, position: relative;hoặc position: fixed).

Ngoài ra còn position: sticky;có hỗ trợ trong Firefox, có tiền tố trong Safari, đã hoạt động một thời gian trong các phiên bản Chrome cũ hơn dưới cờ tùy chỉnh và đang được Microsoft xem xét để thêm vào trình duyệt Edge của họ.

Quan trọng
Đối với định vị thông thường, đảm bảo bao gồm position: relativecác yếu tố mà bạn cũng đặt z-index. Nếu không, nó sẽ không có hiệu lực.

Nếu bạn đặt vị trí thành giá trị khác ngoài staticnhưng phần tử của z-indexbạn dường như vẫn không hoạt động, có thể một số phần tử cha đã z-indexđược đặt.

Các bối cảnh xếp chồng có thứ bậc và mỗi bối cảnh xếp chồng được xem xét theo thứ tự sắp xếp của bối cảnh xếp chồng của cha mẹ.

Vì vậy, với html sau

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

bất kể mức độ lớn z-indexcủa el3nó sẽ được đặt ra, nó sẽ luôn ở dưới el1bởi vì cha mẹ của nó có bối cảnh xếp chồng thấp hơn. Bạn có thể tưởng tượng thứ tự xếp chồng là các cấp trong đó thứ tự xếp chồng el3thực sự là 3,8 thấp hơn 5 .

Nếu bạn muốn kiểm tra bối cảnh xếp chồng của các phần tử cha, bạn có thể sử dụng:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

Có một bài viết tuyệt vời về bối cảnh xếp chồng trên MDN

Các yếu tố của bạn cần phải có một positionthuộc tính. (ví dụ absolute, relative, fixed) hoặc z-indexsẽ không làm việc.

Trong nhiều trường hợp, một yếu tố phải được định vị z-indexđể làm việc.

Thật vậy, áp dụng position: relativecho các yếu tố trong câu hỏi có thể sẽ giải quyết vấn đề (nhưng không có đủ mã được cung cấp để biết chắc chắn).

Trên thực tế, position: fixed, position: absolutevà position: stickycũng sẽ cho phép z-index, nhưng những giá trị cũng thay đổi bố cục. Với position: relativebố cục không bị xáo trộn.

Về cơ bản, miễn là phần tử không position: static(cài đặt mặc định), nó được coi là định vị và z-indexsẽ hoạt động.

Nhiều câu trả lời cho "Tại sao z-index không hoạt động?" câu hỏi khẳng định rằng z-index chỉ hoạt động trên các yếu tố định vị. Kể từ CSS3, điều này không còn đúng nữa.

Các yếu tố là vật phẩm flex hoặc vật phẩm lưới có thể sử dụng z-indexngay cả khi positioncó static.

Từ thông số kỹ thuật:

4.3. Đặt hàng linh hoạt Z

Các mục Flex vẽ chính xác giống như các khối nội tuyến, ngoại trừ thứ tự tài liệu được sửa đổi theo thứ tự được sử dụng thay cho thứ tự tài liệu thô và z-indexcác giá trị khác ngoài việc autotạo bối cảnh xếp chồng ngay cả khi positioncó static.

5.4. Đặt hàng trục Z: thuộc z-indextính

Thứ tự vẽ của các mục lưới hoàn toàn giống với các khối nội tuyến, ngoại trừ thứ tự tài liệu được sửa đổi thứ tự được sử dụng thay cho thứ tự tài liệu thô và z-indexcác giá trị khác ngoài việc autotạo bối cảnh xếp chồng ngay cả khi positioncó static.

Dưới đây là một minh chứng về cách z-indexlàm việc trên các mục flex không định vị: https://jsfiddle.net/m0wddwxs/