CSS Z-index

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    514 lượt xem


CSS Z-index dùng để xác định thứ tự của các element trong HTML theo trục z.

z-index Property

Khi các element được thêm thuộc tính position, chúng có thể chồng lên các element khác.

Thuộc tính z-index chỉ định thứ tự của một element (element nào nên được đặt phía trước hoặc phía sau các element khác).

Một element có thể có thứ tự dương hoặc âm:

Tiêu đề

Vì hình ảnh có z-index là -1, nên nó sẽ ở phía sau chữ.

img {    position: absolute;    left: 0px;    top: 0px;    z-index: -1;  }

Lưu ý: z-index chỉ hoạt động trên các element có thuộc tính position (relative, absolute, fixed, sticky) và flex items (element là con trực tiếp của element có display: flex;).

Thêm một số ví dụ z-index

<html>  <head>  <style>  .container {    position: relative;  }    .black-box {    position: relative;    z-index: 1;    border: 2px solid black;    height: 100px;    margin: 30px;  }    .gray-box {    position: absolute;    z-index: 3;    background: lightgray;    height: 60px;    width: 70%;    left: 50px;    top: 50px;  }    .green-box {    position: absolute;    z-index: 2;    background: lightgreen;    width: 35%;    left: 270px;    top: -15px;    height: 100px;  }  </style>  </head>  <body>    <div class="container">    <div class="black-box">Black box</div>    <div class="gray-box">Gray box</div>    <div class="green-box">Green box</div>  </div>    </body>  </html>

 

Cùng ví dụ trên nhưng không có z-index

<html>  <head>  <style>  .container {    position: relative;  }    .black-box {    position: relative;    border: 2px solid black;    height: 100px;    margin: 30px;  }    .gray-box {    position: absolute;    background: lightgray;    height: 60px;    width: 70%;    left: 50px;    top: 50px;  }    .green-box {    position: absolute;    background: lightgreen;    width: 35%;    left: 270px;    top: -15px;    height: 100px;  }  </style>  </head>  <body>    <div class="container">    <div class="black-box">Black box</div>    <div class="gray-box">Gray box</div>    <div class="green-box">Green box</div>  </div>    </body>  </html>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.