Thuộc tính z-index CSS Mighty
Trong bài viết này, bạn sẽ tìm hiểu về cách sử dụng thuộc z-index CSS z-index … Cách duy nhất để xâm nhập vào chiều thứ 3 với CSS!
Hầu hết thời gian khi bạn tạo kiểu mọi thứ bằng CSS, nó ở trên mặt phẳng 2D. Các phần tử HTML được đặt theo chiều ngang / dọc trên trang giống như các khối xếp chồng trong Tetris. Chỉ số z-index thay đổi mô hình này và cung cấp cho bạn khả năng xác định hệ thống phân cấp trực quan trên mặt phẳng thứ 3: trục z.
Trong đoạn mã này, #navbar , sẽ chồng lên #footer (nếu vị trí của chúng trùng nhau) vì nó có chỉ số z cao hơn.
#navbar { position: relative; z-index: 11; } #footer { position: relative; z-index: 10; } Nếu ta không sử dụng z-index , thanh chuyển sẽ chỉ đẩy phần chân trang ra xa thay vì chồng lên nhau.
Sử dụng cho z-index
Tự mình nhìn vào mã có một chút trừu tượng, vì vậy hãy xem bản trình diễn này, nơi z-index được sử dụng.
Xem Pen eYZEoVL của alligatorio ( @alligatorio ) trên CodePen .
<div> <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" /> </div> <div id="magazine-title"> Sammy the Shark </div> #portrait { position: relative; z-index: 1 width: 200px; } #magazine-title { position: relative; z-index: 2; top: -2em; left: 2em; font: normal 2em sans-serif; color: darkslategray; background-color: whitesmoke; border: 3px dotted darkslategray; } Sử dụng z-index , ta có thể làm cho văn bản chồng lên hình ảnh! Đây chỉ là một cách nhỏ mà các lớp giới thiệu một cách khác để bạn nghĩ về thiết kế web.
Một cảnh báo nhỏ
Nếu bạn có một con mắt tinh tường, bạn có thể nhận thấy rằng các đoạn mã trước đó đã sử dụng position: relative cùng với z-index . Đây không phải là một sự trùng hợp ngẫu nhiên: luật z-index chỉ hoạt động trên "các phần tử được định vị".
Việc quên áp dụng luật position sẽ bỏ qua luật z-index một cách hiệu quả.
div { position: static | relative | absolute | sticky | fixed; z-index: 1; } Phần tử được định vị là phần tử HTML tương đối, tuyệt đối, cố định hoặc cố định. Về cơ bản, nó là bất cứ thứ gì ngoài tĩnh.
Đối thủ anh chị em
Một lưu ý nhỏ khác là z-index chỉ cạnh tranh giữa các phần tử HTML anh em.
Với hai phần tử HTML, phần tử HTML lồng nhau sâu sẽ luôn bị phần tử HTML ít lồng nhau hơn có giá trị z-index thấp hơn chồng lên nhau .
Dưới đây là bản trình diễn chứng minh rằng z-index chỉ cạnh tranh giữa các phần tử HTML anh em:
<div class="blue"> <div class="violet"></div> <div class="purple"></div> </div> <div class="green"></div> .blue { position: relative; z-index: 2; background-color: blue; } .violet { position: relative; z-index: 4; background-color: violet; } .purple { position: relative; z-index: 1; background-color: purple; } .green { position: relative; z-index: 3; background-color: green; top: -4em; } Yếu tố HTML div.violet sẽ bị chồng chéo bởi div.green mặc dù có một cao hơn z-index giá trị!
Các giá trị cho z-index phải là một số nguyên dương / âm. Điều này không nghĩa là bạn có thể có các lớp trục z không giới hạn! Phạm vi tối đa là ± 2147483647 .
Trong các cơ sở mã CSS, bạn sẽ thường thấy các giá trị z-index là 999, 9999 hoặc 99999. Đây có lẽ là một cách lười biếng đảm bảo rằng phần tử luôn ở trên cùng. Nó có thể dẫn đến các vấn đề trên đường khi nhiều yếu tố cần phải ở trên cùng. Hầu hết thời gian bạn sẽ thấy rằng chỉ số z bằng 1 hoặc 2 là đủ cho nhu cầu của bạn.
Kết thúc
Hãy xem lại một số điều ta đã học được về z-index :
-
z-indexcó thể tạo các lớp chồng lên nhau trên trục z! -
z-indexchỉ hoạt động với các phần tử được định vị -
z-indexchỉ cạnh tranh với các phần tử HTML anh em
Khi bạn xếp lớp nội dung, nó có thể tạo ra các thiết kế thú vị! Hy vọng rằng bạn đã nắm được cách thức hoạt động của z-index và một số nguyên tắc để bạn có thể sử dụng nó thành công!
Truy cập MDN để có tài liệu chuyên sâu về thuộc tính z-index .
Các tin liên quan
CSS: focus-trong Pseudo-Class2020-09-01
Hiểu từ khóa màu hiện tại trong CSS
2020-09-01
Giới thiệu về Bộ đếm CSS
2020-08-31
Thuộc tính CSS text-shadow
2020-08-20
Cách tạo hiệu ứng cuộn thị sai với CSS thuần túy trong Chrome
2020-08-03
Cách tạo trang đích có kiểu dáng với CSS Tailwind
2020-06-23
Triển khai một CSS thuần túy có thể thu gọn
2020-05-02
Căn giữa mọi thứ trong CSS bằng Flexbox
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
