Cấp bậc tác giả:

HTML

Thuộc tính Z-index trong CSS

Được viết bởi webmaster ngày 05/08/2013 lúc 03:52 AM
Tiếp theo bài viết CSS absolute position, hôm nay mình sẽ giới thiệu với các bạn về z-index trong CSS. Để 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:
  • 0
  • 1345

Thuộc tính Z-index trong CSS


Tiếp theo bài viết CSS absolute position, hôm nay mình sẽ giới thiệu với các bạn về z-index trong CSS.
Để 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:

<div id="wapper">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
</div>

Mã CSS:

#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ả:

z-index_01.jpg

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:

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

z-index_02.gif

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.

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML