Định vị các phần tử chồng lấp với tờ kiểu xếp tầng
Một trong những thách thức khi sử dụng định vị CSS cho bố cục trang web là một số yếu tố của bạn có thể chồng lên nhau. Điều này làm việc tốt nếu bạn muốn phần tử cuối cùng trong HTML ở trên đầu, nhưng nếu bạn không hoặc những gì nếu bạn muốn có các phần tử hiện không chồng lên nhau để làm như vậy vì thiết kế gọi cho giao diện "phân lớp" này ? Để thay đổi cách các phần tử chồng lên nhau, bạn cần sử dụng thuộc tính của CSS.
Nếu bạn đã sử dụng một công cụ đồ họa trong Word và PowerPoint hoặc trình chỉnh sửa hình ảnh mạnh mẽ hơn như Adobe Photoshop, thì rất có thể là bạn đã thấy thứ gì đó như z-index đang hoạt động. Trong các chương trình này, bạn có thể đánh dấu (các) đối tượng mà bạn đã vẽ và chọn một tùy chọn để “Gửi lại” hoặc “Đưa ra trước” một số phần tử nhất định trong tài liệu của bạn. Trong Photoshop, bạn không có các chức năng này, nhưng bạn có cửa sổ "Lớp" của chương trình và bạn có thể sắp xếp nơi một phần tử rơi vào khung vẽ bằng cách sắp xếp lại các lớp này. Trong cả hai ví dụ này, về cơ bản bạn đang thiết lập chỉ mục z của các đối tượng đó.
Z-index là gì?
Khi bạn đang sử dụng định vị CSS để định vị các phần tử trên trang, bạn cần suy nghĩ theo ba chiều. Có hai kích thước tiêu chuẩn: trái / phải và trên / dưới. Chỉ số trái sang phải được gọi là x-index, trong khi từ trên xuống dưới là chỉ mục y. Đây là cách bạn sẽ định vị các phần tử theo chiều ngang hoặc chiều dọc, sử dụng hai chỉ mục này.
Khi nói đến thiết kế web, đó cũng là thứ tự xếp chồng của trang. Mỗi phần tử trên trang có thể được xếp lớp trên hoặc dưới bất kỳ phần tử nào khác. Thuộc tính z-index xác định vị trí của mỗi phần tử trong ngăn xếp. Nếu chỉ mục x và chỉ mục y là các đường ngang và dọc, thì chỉ mục z là độ sâu của trang, về cơ bản là thứ nguyên thứ 3.
Tôi thích nghĩ về các yếu tố trên một trang web dưới dạng các mẩu giấy và bản thân trang web đó là một ảnh ghép. Nơi tôi đặt giấy được xác định bởi vị trí, và bao nhiêu của nó được bao phủ bởi các yếu tố khác là z-index.
Chỉ số z là một số, hoặc là dương (ví dụ 100) hoặc âm (ví dụ -100). Chỉ số z mặc định là 0. Phần tử có chỉ mục z cao nhất nằm ở trên cùng, tiếp theo là giá trị cao nhất tiếp theo và tiếp tục giảm xuống chỉ mục z thấp nhất. Nếu hai phần tử có cùng giá trị z-index (hoặc nó không được định nghĩa, nghĩa là sử dụng giá trị mặc định là 0) trình duyệt sẽ xếp chúng theo thứ tự chúng xuất hiện trong HTML.
Cách sử dụng z-index
Cung cấp cho mỗi phần tử bạn muốn trong ngăn xếp của bạn một giá trị chỉ mục z khác. Ví dụ, nếu tôi có năm yếu tố khác nhau:
- phần tử 1 - chỉ số z -25
- phần tử 2 - chỉ số z của 82
- phần tử 3 - z-index chưa được đặt
- phần tử 4 - chỉ số z của 10
- phần tử 5 - chỉ số z -3
Họ sẽ xếp theo thứ tự sau:
- phần tử 2
- phần tử 4
- yếu tố 3
- phần tử 5
- yếu tố 1
Tôi khuyên bạn nên sử dụng các giá trị chỉ mục z khác nhau để xếp các phần tử của bạn. Bằng cách đó, nếu bạn thêm nhiều phần tử hơn vào trang sau, bạn có thể xếp lớp chúng vào mà không phải điều chỉnh giá trị z-index của tất cả các phần tử khác. Ví dụ:
- 100 cho phần tử cao nhất của tôi
- 0 cho phần tử ở giữa của tôi
- -100 cho phần tử đáy của tôi
Bạn cũng có thể cung cấp cho hai phần tử cùng giá trị z-index. Nếu các phần tử này được xếp chồng lên nhau, chúng sẽ hiển thị theo thứ tự chúng được viết bằng HTML, với phần tử cuối cùng ở trên cùng.
Một lưu ý, để một phần tử sử dụng thuộc tính z-index một cách hiệu quả, nó phải là một phần tử mức khối hoặc sử dụng một hiển thị của "block" hoặc "inline-block" trong tệp CSS của bạn.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa ngày 12/09/16 bởi Jeremy Girard.