Liên hệ
css

Chiều z của phần tử với thuộc tính z-index CSS

Thiết lập z-index trong CSS điều khiển thứ tự hiện thị các box HTML khi trùng vị trí

Chiều z của phần tử

Khi các phần tử định vị không theo luồng mặc định thông thường. Một phần tử có thể đè nên phần tử khác. Lúc đó chỉ số z-index quy định thứ tự xếp chông nên nhau, cái nào nằm trước, cái nào nằm sau ở một vị trí.

 <style>
    .blue {
        background-color: #8EC4D0;
        margin-bottom: 15px;
        width: 120px;
        height: 120px;
        color: #FFF;
    }
    .red {
        background-color: #FF4D4D;
        position: relative;
        width: 120px;
        height: 120px;
        color: #FFF;
        margin-top: -50px;
        margin-left: 50px;
    }
</style>
<div class="blue">Nội dung trong hộp màu xanh</div>
<div class="red">Nội dung trong hộp màu đỏ</div>
Nội dung trong hộp màu xanh
Nội dung trong hộp màu đỏ

Bạn thấy hộp màu đỏ đè nên hộp màu xanh vì trong nội dung HTML hộp màu đỏ nằm sau hộp màu xanh.

Với thuộc tính z-index bạn có thể tự do điều khiển màu đỏ nằm sau hay trước màu xanh.

Khi một phần tử có z-index nhỏ hơn thì nó nằm sau phần tử có z-index lớn hơn

<style>
    .blue2 {
        position: relative;
        background-color: #8EC4D0;
        margin-bottom: 15px;
        width: 120px;
        height: 120px;
        color: #FFF;
        z-index: 3;

    }
    .red2 {
        background-color: #FF4D4D;
        position: relative;
        width: 120px;
        height: 120px;
        color: #FFF;
        margin-top: -50px;
        margin-left: 50px;
        z-index: 0;

    }
</style>

<div class="blue2">Nội dung trong hộp màu xanh</div>
<div class="red2">Nội dung trong hộp màu đỏ</div>
Nội dung trong hộp màu xanh
Nội dung trong hộp màu đỏ

Lưu ý z-index chỉ làm việc khi phần tử có thuộc tính position (position:absolute position:relative position:fixed)

Vui lòng đăng ký ủng hộ kênh