21. Z-index Trong CSS

Z-index trong CSS: z-index là một thuộc tính được sử dụng để kiểm soát thứ tự hiển thị của các phần tử trên trang web. Thuộc tính này xác định cách các phần tử chồng lên nhau khi chúng có vị trí (position) là “absolute”, “relative” hoặc “fixed”. z-index chỉ có tác dụng khi phần tử có thuộc tính vị trí (position) không phải là “static”.

Giá trị của z-index là một số nguyên, và có thể dương, âm hoặc bằng 0. Giá trị càng lớn thì phần tử càng nằm trên cùng của các phần tử khác có giá trị z-index nhỏ hơn.

Cách sử dụng:

css

.element {
  position: relative; /* Hoặc position: absolute; hoặc position: fixed; */
  z-index: 2; /* Giá trị có thể thay đổi */
}

Một số lưu ý khi sử dụng z-index:

z-index chỉ có tác dụng trên các phần tử có thuộc tính vị trí (position) không phải là “static”.
z-index chỉ áp dụng trong phạm vi của một stacking context. Stacking context được tạo ra bởi một phần tử có thuộc tính vị trí (position) khác “static”, và các phần tử con của nó sẽ nằm trong cùng một stacking context.
Các phần tử có z-index lớn hơn sẽ được đặt lên trên so với các phần tử có z-index nhỏ hơn.
Khi các phần tử có cùng một stacking context và cùng một z-index, thứ tự xuất hiện trong mã HTML sẽ quyết định thứ tự hiển thị trên giao diện.
z-index không phải lúc nào cũng là cách tốt nhất để kiểm soát thứ tự hiển thị. Trong một số trường hợp, việc cấu trúc HTML và CSS cẩn thận hơn có thể giúp tránh sử dụng z-index phức tạp.

Sử dụng z-index cần cẩn thận để tránh gây ra những hiệu ứng không mong muốn và khó kiểm soát trên giao diện của trang web.

Dưới đây là một ví dụ về cách sử dụng z-index trong CSS để kiểm soát thứ tự hiển thị của các phần tử trên một trang web đơn giản:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Z-Index Example</title>
</head>
<body>
  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
  </div>
</body>
</html>

CSS (styles.css):

css

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightgray;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  padding: 10px;
  text-align: center;
  border: 1px solid black;
}

.box1 {
  background-color: red;
  top: 50px;
  left: 50px;
  z-index: 2;
}

.box2 {
  background-color: green;
  top: 100px;
  left: 100px;
  z-index: 1;
}

.box3 {
  background-color: blue;
  top: 150px;
  left: 150px;
  /* Không có giá trị z-index được định nghĩa, mặc định là auto */
}

Trong ví dụ này, chúng ta có ba hộp màu đỏ, xanh lá cây và xanh dương. Hộp đỏ (box1) có z-index là 2, hộp xanh lá cây (box2) có z-index là 1 và hộp xanh dương (box3) không có z-index được định nghĩa (mặc định là auto). Do đó, hộp đỏ sẽ được đặt lên trên cùng, theo sau là hộp xanh lá cây và hộp xanh dương.

Leave a Comment Cancel Reply