Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

Table of Contents

Trong lập trình web, đôi khi bạn cần xác định phần tử nào sẽ hiển thị trên cùng khi có sự chồng lấn giữa các thành phần giao diện. Điều này có thể được kiểm soát bằng thuộc tính z-index trong CSS. Thuộc tính này cho phép bạn điều chỉnh thứ tự hiển thị của các phần tử, với giá trị cao hơn sẽ được ưu tiên hiển thị trên giá trị thấp hơn. Tuy nhiên, z-index chỉ hoạt động với các phần tử có thuộc tính position được đặt là relative, absolute hoặc fixed. Việc sử dụng hợp lý giúp cải thiện trải nghiệm người dùng và tối ưu bố cục trang web một cách hiệu quả.

Độ ưu tiên hiển thị là gì !?

Độ ưu tiên hiển thị có thể tạm hiểu như một loại đơn vị đo lường dùng để quyết định việc “phần tử nào sẽ được hiển thị đè lên phần tử nào trong trường hợp các phần tử đó chồng chéo lên nhau do bị thiết lập nằm ở cùng một vị trí hoặc giao nhau.”

Ví dụ:
– Tôi có một đoạn mã như bên dưới.

<!DOCTYPE html>
<html>
<head>
    <title>Tiêu đề của trang web</title>
    <style type="text/css">
        #red, #green, #blue{
            width:150px;
            height:150px;
            border-radius:50%;
            position:absolute;
        }
        #red{
            background-color:red;
            top:0px;
            left:0px;
        }
        #green{
            background-color:green;
            top:0px;
            left:75px;
        }
        #blue{
            background-color:blue;
            top:75px;
            left:37.5px;
        }
    </style>
</head>
<body>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
</body>
</html>

– Ba phần tử #red #green #blue được thiết lập vị trí giao nhau, nên tại điểm giao nhau ba phần tử này bị chồng chéo lên nhau, trong đó:

Phần tử #blue được khai báo sau #green nên nó có độ ưu tiên hiển thị cao hơn #green
Phần tử #green được khai báo sau #red nên nó có độ ưu tiên hiển thị cao hơn #red

– Đó là lý do tại sao các bạn thấy phần tử #blue hiển thị đè lên phần tử #green, phần tử #green hiển thị đè lên phần tử #red, mà không phải theo một thứ tự khác.

Cách thiết lập độ ưu tiên hiển thị cho một phần tử HTML

Sau khi xem xong ví dụ phía trên thì chắc các bạn cũng đã thấy “đối với các phần tử anh em bị thiết lập nằm ở cùng một vị trí (hoặc giao nhau) thì các phần tử được khai báo sau sẽ có độ ưu tiên hiển thị cao hơn các phần tử được khai báo trước, điều đó đồng nghĩa với việc các phần tử khai báo sau sẽ hiển thị đè lên các phần tử khai báo trước.”

Vậy vấn đề đặt ra ở đây là: “Nếu muốn một phần tử được khai báo trước có độ ưu tiên hiển thị cao hơn phần tử được khai báo sau thì chúng ta phải làm như thế nào !?”

Nếu muốn phần tử được khai báo trước có độ ưu tiên hiển thị cao hơn phần tử được khai báo sau thì chúng ta sử dụng thuộc tính z-index để thiết lập lại độ ưu tiên hiển thị cho phần tử được khai báo trước, sao cho độ ưu tiên hiển thị của nó lớn hơn các phần tử được khai báo sau.

– Cú pháp:

z-index: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị.

auto	– Để mặc định (tương đương với việc không thiết lập độ ưu tiên)	Xem ví dụ
number	– Chỉ định độ ưu tiên hiển thị của phần tử dựa theo một số nguyên cụ thể, số nguyên này có thể là số âm hoặc số dương, số càng lớn thì độ ưu tiên hiển thị càng cao.	Xem ví dụ
number	– Lưu ý: Chúng ta chỉ nên sử dụng số âm khi muốn thiết lập cho phần tử có độ ưu tiên hiển thị thấp hơn so với những phần tử không được thiết lập độ ưu tiên hiển thị (những phần tử không được thiết lập độ ưu tiên hiển thị thường có mức độ ưu tiên hiển thị tương đương với 0)	Xem ví dụ
initial	– Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính z-index có giá trị là auto)	Xem ví dụ
inherit	– Kế thừa giá trị thuộc tính z-index từ phần tử cha của nó.	Xem ví dụ