Làm thế nào để làm việc vớiz-index
thuộc tính trong CSS
bên trongbài đăng định vịTôi đã đề cập rằng bạn có thể sử dụngz-index
thuộc tính điều khiển vị trí trục Z của các phần tử.
Nó rất hữu ích khi bạn có nhiều phần tử chồng lên nhau và bạn cần quyết định cái nào hiển thị, gần người dùng hơn và (các) phần tử nào nên được ẩn đằng sau nó.
Thuộc tính này nhận một số (không có số thập phân) và sử dụng số đó để tính toán phần tử nào xuất hiện gần người dùng hơn, trong trục Z.
Giá trị z-index càng cao, phần tử càng được định vị gần người dùng hơn.
Khi quyết định phần tử nào sẽ hiển thị và phần tử nào nên được đặt phía sau nó, trình duyệt sẽ thực hiện một phép tính trên giá trị z-index.
Giá trị mặc định làauto
, một từ khóa đặc biệt. Sử dụngauto
, thứ tự trục Z được xác định bởi vị trí của phần tử HTML trong trang - phần tử cuối cùng xuất hiện đầu tiên, vì phần tử này được xác định sau cùng.
Theo mặc định, các phần tử cóstatic
giá trị choposition
bất động sản. Trong trường hợp này,z-index
thuộc tính không tạo ra bất kỳ sự khác biệt nào - nó phải được đặt thànhabsolute
,relative
hoặc làfixed
làm việc.
Thí dụ:
.my-first-div {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 600px;
z-index: 10;
}
.my-second-div {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
z-index: 20;
}
Phần tử có lớp.my-second-div
sẽ được hiển thị, và đằng sau nó.my-first-div
.
Ở đây chúng tôi đã sử dụng 10 và 20, nhưng bạn có thể sử dụng bất kỳ số nào. Số âm quá. Việc chọn các số không liên tiếp thường gặp, vì vậy bạn có thể đặt các phần tử ở giữa. Thay vào đó, nếu bạn sử dụng các số liên tiếp, bạn sẽ cần phải tính toán lại chỉ số z của mỗi phần tử liên quan đến việc định vị.
Tải xuống miễn phí của tôiSổ tay CSS
Các hướng dẫn css khác:
- Hướng dẫn Flexbox
- Hướng dẫn về CSS Grid
- Biến CSS (Thuộc tính tùy chỉnh)
- Giới thiệu về PostCSS
- Thuộc tính lề CSS
- Cách căn giữa một phần tử bằng CSS
- Phông chữ Hệ thống CSS
- Cách in HTML của bạn với phong cách
- Hướng dẫn giới thiệu về Chuyển đổi CSS
- Hướng dẫn tạo ảnh động CSS
- Giới thiệu về CSS
- Hướng dẫn CSS
- Cách thiết lập Tailwind với PurgeCSS và PostCSS
- Tờ Tailwind Cheat
- Cách xoay liên tục hình ảnh bằng CSS
- Tạo bảng phản hồi bằng CSS
- Cách gỡ lỗi CSS bằng cách chia đôi
- Bộ chọn CSS
- Xếp tầng CSS
- Đặc tính CSS
- Bộ chọn thuộc tính CSS
- Màu sắc CSS
- Đơn vị CSS
- Url CSS ()
- Kiểu chữ CSS
- Mô hình hộp CSS
- Thuộc tính vị trí CSS
- Truy vấn phương tiện CSS và thiết kế đáp ứng
- Truy vấn tính năng CSS
- Chuyển đổi CSS
- Cách tạo kiểu danh sách bằng CSS
- Tiền tố nhà cung cấp CSS
- Kế thừa CSS
- Lớp giả CSS
- Phần tử giả CSS
- Tạo kiểu bảng HTML bằng CSS
- Thuộc tính Hiển thị CSS
- Hàm calc () CSS
- Đường viền CSS
- Nhập tệp CSS bằng @import
- Xử lý lỗi CSS
- Bộ lọc CSS
- Kích thước hộp CSS
- Nền CSS
- Nhận xét CSS
- Phông chữ CSS
- CSS Padding
- Thuộc tính float CSS và thanh toán bù trừ
- Chuẩn hóa CSS
- Thuộc tính CSS z-index
- Cách tắt lựa chọn văn bản bằng CSS
- Cách đặt một mục ở dưới cùng của vùng chứa bằng CSS
- Cách đảo màu bằng CSS
- Các thẻ pre đáp ứng trong CSS
- Nhúng video YouTube thích ứng
- Giá trị Điểm ngắt CSS tốt cho Thiết kế đáp ứng là gì?
- Cách căn giữa trong flexbox