CSS3: CSS: z-index

Thuộc tính CSS z-index đặt trật tự của một vị trí phần tử và con của nó với các mục flex. Các phần tử chồng lấp với z-index lớn hơn bao gồm các phần tử có phần tử nhỏ hơn.

Đối với hộp được định vị (nghĩa là một hộp có bất kỳ loại position nào khác static), thuộc tính z-index chỉ định:

1. Mức độ ngăn xếp của hộp trong bối cảnh xếp chồng hiện tại.
2. Cho dù hộp thiết lập một bối cảnh xếp chồng cục bộ.

Cú pháp

/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;

Các thuộc tính z-index được chỉ định là từ khóa  auto hoặc một  <integer>.

Giá trị

auto

Hộp không thiết lập bối cảnh xếp chồng cục bộ mới. Mức ngăn xếp của hộp được tạo trong bối cảnh xếp chồng hiện tại giống như hộp chứa nó.

<integer>

Đây là <integer> cấp độ ngăn xếp của hộp được tạo trong bối cảnh xếp chồng hiện tại. Hộp cũng thiết lập một bối cảnh xếp chồng cục bộ trong đó mức độ ngăn xếp của nó là  0. Điều này có nghĩa là chỉ số z của con cháu không được so sánh với chỉ số z của các phần tử bên ngoài phần tử này.

Cú pháp chính thức

auto | <integer>

Ví dụ

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

CSS

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

Kết quả