Hôm nay m sẽ giới thiếu các bạn về thuộc tính Z-index trong css,

về Z-index, nó có giá trị như sau

auto: Tự động sắp xếp thứ tự chồng nhau cho thành phần, đây là dạng mặc định.

Giá trị: Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị.

inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Để tìm hiểu về z-index, mình xin đưa ra ví dụ về việc sử dụng CSS absolute position để xếp chồng các thành phần lên nhau:

Mã HTML:

Code:

<div id="wapper">

      <div class="box1"></div>

      <div class="box2"></div>

      <div class="box3"></div>

</div>

Mã CSS:

Code:

#wapper{position: relative; width: 300px; height: 300px}

.box1,.box2,.box3{position: absolute; width: 150px; height; 150px}

.box1{top: 0; left: 0; background: blue}

.box2{top: 40px; left: 40px; background: green}

.box3{top: 80px; left: 80px; background: #cfcfcf}

Kết quả:




Nguyên lý:

Một thành phần A và B được xếp chồng lên nhau khi thành phần A được định vị trong không gian của thành phần B và ngược lại.
Ở ví dụ trên ta thấy: thành phần box2 có vị trí top: 40px và left: 40px do đó nó nằm trong không gian 150x150px của thành phần box1, do đó thành phần box2 được nằm chồng lên box1, tương tự như thế cho các thành phần còn lại.

Vai trò của Z-index?

Trong ví dụ trên: thành phần box3 chồng lên box2, box2 chồng lên box1 theo đứng thứ tự trong mã HTML, theo mặc định thành phần nào nằm sau sẽ được xếp chồng lên thành phần trước.
Làm sao để thay đổi thứ tự này?. Đó chính là vai trò của z-index trong CSS.

Thành phần nào có chỉ số z-index cao hơn sẽ nằm trên các thành phần khác.
Giá trị của thuộc tính z-index là một số thập phân, mặc định khi không dược khai báo, các thành phần có giá trị z-index là 0.
Trong ví dụ trên, giả sử bây giờ ta muốn thành phần box1 nằm trên box2 và box3, thì chỉ cần gán giá trị z-index cho thành phần box1:

Mã CSS:

Code:

.box1{top: 0; left: 0; background: blue; z-index: 1}

Bạn hãy thử để xem thử sự thay đổi nhé

Nắm được z-index, kết hợp với CSS position bạn có thể thiết kế được những giao diện khó và độ phức tạp cao. Tôi hy vọng rằng bài viết này có thể giúp ích cho bạn. Nếu bạn có bất kỳ câu hỏi nào hãy để lại comment bên dưới, tôi sẽ cố gắng trả lời những thắc mắc của bạn.

Clip hướng dẫn: https://www.youtube.com/watch?v=JW0mdYLi7Jw

Sưu tầm và kiến thức tự có

không có demo code à
mà thôi +1 nhé

@byb: HD sơ lược về 1 thuộc tính thôi mà, đâu phải share ^^~