CSS z-index luôn ở trên cùng

Louis là nhà phát triển giao diện người dùng, nhà văn và tác giả có trụ sở tại Toronto, Canada. Anh ấy quản lý các bản tin Công cụ web hàng tuần và Năng suất công nghệ và viết blog về … Thông tin thêm về Louis ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• Hệ thống thiết kế thành công

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

• Danh sách kiểm tra thiết kế giao diện thông minh

• Giao diện người dùng SmashingConf 2023

• Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

Ngữ cảnh xếp chồng trong CSS là một chủ đề phức tạp. Bài viết này nhằm mục đích giải thích mọi thứ bạn cần biết về z-index để bạn có thể sử dụng loại tài sản đặc biệt này một cách tự tin và hiệu quả

Hầu hết các thuộc tính CSS khá đơn giản để xử lý. Thông thường, việc áp dụng thuộc tính CSS cho một thành phần trong đánh dấu của bạn sẽ có kết quả tức thì — ngay sau khi bạn làm mới trang, giá trị được đặt cho thuộc tính sẽ có hiệu lực và bạn sẽ thấy kết quả ngay lập tức. Tuy nhiên, các thuộc tính CSS khác phức tạp hơn một chút và sẽ chỉ hoạt động trong một số trường hợp nhất định

Tài sản z-index thuộc nhóm thứ hai. Nó chắc chắn đã gây ra nhiều nhầm lẫn và thất vọng như bất kỳ tài sản CSS nào khác. Tuy nhiên, trớ trêu thay, khi z-index được hiểu đầy đủ, nó lại là một thuộc tính rất dễ sử dụng và đưa ra một phương pháp hiệu quả để vượt qua nhiều thách thức về bố cục

Trong bài viết này, chúng tôi sẽ giải thích chính xác z-index là gì, nó đã bị hiểu sai như thế nào và chúng tôi sẽ thảo luận về một số ứng dụng thực tế của nó. Chúng tôi cũng sẽ mô tả một số khác biệt về trình duyệt có thể xảy ra, đặc biệt là trong các phiên bản trước của Internet Explorer và Firefox. Cái nhìn toàn diện về z-index này sẽ cung cấp cho các nhà phát triển một nền tảng tuyệt vời để có thể sử dụng tài sản này một cách tự tin và hiệu quả

Đọc thêm trên SmashingMag.

• Quản lý Sassy Z-Index cho bố cục phức tạp
• Nắm vững các nguyên tắc CSS. Hướng dẫn toàn diện
• Hướng dẫn dứt khoát để sử dụng lợi nhuận âm
• Thiết kế mạnh mẽ hơn, tốt hơn, nhanh hơn với CSS3
  

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Chuyển đến hội thảo ↬

Chỉ số z là gì?

Thuộc tính z-index xác định cấp độ ngăn xếp của phần tử HTML. “Cấp độ ngăn xếp” đề cập đến vị trí của phần tử trên trục Z (trái ngược với trục X hoặc trục Y). Giá trị cao hơn có nghĩa là phần tử sẽ ở gần đầu của thứ tự xếp chồng. Thứ tự xếp chồng này chạy vuông góc với màn hình hoặc khung nhìn

Biểu diễn 3 chiều của trục Z

Để minh họa rõ ràng cách thức hoạt động của z-index, hình ảnh trên phóng đại việc hiển thị các phần tử xếp chồng lên nhau so với khung nhìn

Thứ tự xếp chồng tự nhiên

Trong một trang HTML, thứ tự xếp chồng tự nhiên (i. e. thứ tự của các phần tử trên trục Z) được xác định bởi một số yếu tố. Dưới đây là danh sách hiển thị thứ tự các mục phù hợp với ngữ cảnh xếp chồng, bắt đầu từ cuối ngăn xếp. Danh sách này giả định không có mục nào được áp dụng z-index

• Nền và đường viền của phần tử thiết lập bối cảnh xếp chồng
• Các phần tử có bối cảnh xếp chồng phủ định, theo thứ tự xuất hiện
• Các phần tử cấp khối, không định vị, không thả nổi, theo thứ tự xuất hiện
• Các phần tử không định vị, nổi, theo thứ tự xuất hiện
• Các yếu tố nội tuyến, theo thứ tự xuất hiện
• Các yếu tố được định vị, theo thứ tự xuất hiện

Thuộc tính z-index, khi được áp dụng đúng cách, có thể thay đổi thứ tự sắp xếp tự nhiên này

Tất nhiên, thứ tự xếp chồng của các phần tử là không rõ ràng trừ khi các phần tử được định vị chồng lên nhau. Do đó, để xem thứ tự xếp chồng tự nhiên, có thể sử dụng lề âm như hình bên dưới

Hộp màu xám

Hộp xanh

Hộp vàng

Các hộp phía trên có màu nền và đường viền khác nhau, hai hộp cuối cùng được thụt lề và có lề trên âm để bạn có thể thấy thứ tự xếp chồng tự nhiên. Hộp màu xám xuất hiện đầu tiên trong đánh dấu, hộp màu xanh thứ hai và hộp thứ ba màu vàng. Lợi nhuận âm được áp dụng chứng minh rõ ràng thực tế này. Các phần tử này không có giá trị z-index được đặt; . Các chồng chéo xảy ra là do các lề tiêu cực

Tại sao nó gây nhầm lẫn?

Mặc dù z-index không phải là một thuộc tính khó hiểu, nhưng do các giả định sai, nó có thể gây nhầm lẫn cho các nhà phát triển mới bắt đầu. Sự nhầm lẫn này xảy ra vì z-index sẽ chỉ hoạt động trên một phần tử có thuộc tính

var myElement = document.getElementById(“gold_box”);
myElement.style.position = “relative”;
myElement.style.zIndex = “9999”;

4 đã được đặt rõ ràng thành

var myElement = document.getElementById(“gold_box”);
myElement.style.position = “relative”;
myElement.style.zIndex = “9999”;

5,

var myElement = document.getElementById(“gold_box”);
myElement.style.position = “relative”;
myElement.style.zIndex = “9999”;

6 hoặc

var myElement = document.getElementById(“gold_box”);
myElement.style.position = “relative”;
myElement.style.zIndex = “9999”;

7

Để chứng minh rằng z-index chỉ hoạt động trên các phần tử được định vị, đây là ba hộp giống nhau với các giá trị z-index được áp dụng để cố gắng đảo ngược thứ tự xếp chồng của chúng

Hộp màu xám

Hộp xanh

Hộp vàng

Hộp màu xám có giá trị z-index là "9999"; . Theo logic, bạn sẽ cho rằng thứ tự sắp xếp của các hộp này bây giờ sẽ được đảo ngược. Nhưng không phải vậy, vì không có phần tử nào trong số này có tập thuộc tính

var myElement = document.getElementById(“gold_box”);
myElement.style.position = “relative”;
myElement.style.zIndex = “9999”;

4

Đây là những hộp tương tự với z-index4 được thêm vào mỗi hộp và các giá trị z-index của chúng được duy trì

Hộp màu xám

Hộp xanh

Hộp vàng

Bây giờ kết quả là như mong đợi. Thứ tự sắp xếp của các phần tử bị đảo ngược;

cú pháp

Thuộc tính z-index có thể ảnh hưởng đến thứ tự ngăn xếp của cả phần tử cấp khối và phần tử nội tuyến và được khai báo bằng giá trị số nguyên dương hoặc âm hoặc giá trị của z-index7. Giá trị của z-index7 cung cấp cho phần tử thứ tự ngăn xếp giống như phần tử gốc của nó

Đây là mã CSS cho ví dụ thứ ba ở trên, trong đó thuộc tính z-index được áp dụng chính xác

#grey_box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  background: #ddd;
  position: relative;
  z-index: 9999;
}

#blue_box {
  width: 200px;
  height: 200px;
  border: solid 1px #4a7497;
  background: #8daac3;
  position: relative;
  z-index: 500;
}

#gold_box {
  width: 200px;
  height: 200px;
  border: solid 1px #8b6125;
  background: #ba945d;
  position: relative;
  z-index: 1;
}

Một lần nữa, không thể nhấn mạnh đủ, đặc biệt đối với các nhà phát triển CSS mới bắt đầu, rằng thuộc tính z-index sẽ không hoạt động trừ khi nó được áp dụng cho một phần tử được định vị

Sử dụng JavaScript

Nếu bạn muốn tác động động đến giá trị z-index của một phần tử thông qua JavaScript, thì cú pháp tương tự như cách truy cập hầu hết các thuộc tính CSS khác, sử dụng “vỏ bọc lạc đà” để thay thế các thuộc tính CSS có gạch nối, như trong mã hiển thị bên dưới

var myElement = document.getElementById(“gold_box”);
myElement.style.position = “relative”;
myElement.style.zIndex = “9999”;

Trong đoạn mã trên, cú pháp CSS “z-index” trở thành “zIndex”. Tương tự, “màu nền” trở thành “màu nền”, “trọng lượng phông chữ” trở thành “trọng lượng phông chữ”, v.v.

Ngoài ra, thuộc tính vị trí được thay đổi bằng cách sử dụng đoạn mã trên để nhấn mạnh lại rằng z-index chỉ hoạt động trên các phần tử được định vị

Triển khai không đúng cách trong IE và Firefox

Trong một số trường hợp nhất định, có một số mâu thuẫn nhỏ trong Internet Explorer phiên bản 6 và 7 và Firefox phiên bản 2 liên quan đến việc triển khai thuộc tính z-index

elements in IE6

Trong Internet Explorer 6, phần tử z-index4 là một điều khiển có cửa sổ và do đó sẽ luôn xuất hiện ở đầu thứ tự xếp chồng bất kể thứ tự xếp chồng tự nhiên, giá trị vị trí hay z-index. Sự cố này được minh họa trong ảnh chụp màn hình bên dưới

Phần tử z-index4 xuất hiện đầu tiên theo thứ tự ngăn xếp tự nhiên và được cung cấp giá trị z-index là “1” cùng với giá trị vị trí là “tương đối”. Hộp vàng xuất hiện thứ hai trong thứ tự ngăn xếp và được cho giá trị z-index là “9999”. Do thứ tự ngăn xếp tự nhiên và các giá trị z-index, hộp vàng sẽ xuất hiện trên cùng, điều này xuất hiện trong tất cả các trình duyệt hiện đang được sử dụng ngoại trừ IE6

– Chọn Năm – 2009 2010 2011

Hộp vàng

Trừ khi bạn đang xem trang này bằng IE6, nếu không bạn sẽ thấy hộp màu vàng phía trên chồng lên phần tử z-index4

This bug in IE6 has caused problems with drop-down menus that fail to overlap z-index4 elements. One solution is to use JavaScript to temporarily hide the z-index4 element, then make it reappear when the overlapping menu disappears. Another solution involves using an