Thuộc tính CSS z-index

Làm thế nào để làm việc với`z-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-indexthuộ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óstaticgiá trị chopositionbất động sản. Trong trường hợp này,z-indexthuộ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,relativehoặc làfixedlà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-divsẽ đượ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

Thuộc tính CSS z-index

Làm thế nào để làm việc vớiz-indexthuộc tính trong CSS

Các hướng dẫn css khác:

Làm thế nào để làm việc với`z-index`thuộc tính trong CSS