Thuộc tính z-index trong CSS

“Hãy hòa nhã với những kẻ dở hơi. Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy.”

Bill Gates

Microsoft

Thuộc tính z-index trong CSS có thể được sử dụng kết hợp với thuộc tính position để tạo hiệu ứng layer (xếp chồng phần tử) như Photoshop.

Thuộc tính z-index trong CSS
Thuộc tính z-index trong CSS

Xếp chồng các phần tử bằng z-index

Thông thường các trang HTML được coi là hai chiều (2D), vì văn bản, hình ảnh và các yếu tố khác được sắp xếp trên trang mà không bị chồng lên nhau.

Tuy nhiên, ngoài vị trí theo chiều ngang (x) và dọc (y) của chúng, các phần tử cũng có thể được xếp chồng lên nhau dọc theo trục z.

Tức là, phần tử này nằm trên phần tử kia bằng cách sử dụng thuộc tính z-index trong CSS.

Thuộc tính z-index này chỉ định thứ tự xếp chồng của phần tử có giá trị position xác định là absolute, fixed hay relative.

Vị trí trục z của mỗi layer được biểu thị dưới dạng số nguyên đại diện cho thứ tự xếp chồng để trình duyệt kết xuất các layer đúng như mong muốn.

Ví dụ layer trong website
Ví dụ layer trong website

Phần tử có chỉ số z-index lớn hơn thì chồng lên phần tử có chỉ số z-index thấp hơn.

Với thuộc tính z-index, bạn có thể tạo ra bố cục trang web phức tạp hơn, có chiều sâu hơn.

Sau đây là ví dụ cho thấy cách tạo các layer trong CSS với thuộc tính z-index.

HTML:

<div id="layer1" style="z-index: 2"></div>
<div id="layer2" style="z-index: 1">
    <div id="layer3" style="z-index: 3"></div>
</div>

Với CSS như thế này:

div {
    border: 2px solid #000;
    width: 300px;
    height: 50px;
    margin: 10px;
    position: relative;
    background-color: #FFF;
}

#layer3 {
    background-color: orange;
    width: 300px;
    height: 60px;
    top: -50px;
}

Kết quả nhận được là như thế này:

Ví dụ sử dụng z-index trong CSS
Ví dụ sử dụng z-index trong CSS

Có thể bạn muốn xem

Pesudo Element trong CSS

Sử dụng phần tử giả (Pesudo element) trong CSS là một cách để áp dụng các quy tắc CSS cho phần tử không xác định vị trí trong DOM tree.

Pesudo class trong CSS

Bộ chọn lớp giả CSS (Pesudo class Selector) khớp với các thành phần dựa trên một điều kiện bổ sung và không nhất thiết phải được định nghĩa trong DOM tree.

Leave a reply

Please enter your comment!
Please enter your name here