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

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>

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>

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)