Menu
GIỚI THIỆU
  • Bài này chúng ta tìm hiểu z-index trong CSS và các ví dụ về z-index, một số trường hợp sử dụng của z-index trong CSS mà bạn nên biết

Bài 13: Tìm hiểu thuộc tính z-index trong CSS

Mấy bữa nay đang tính cải thiện thêm 1 cái popup xuất hiện khi thành viên muốn tạo chủ đề mới sẽ thấy popup thông báo yêu cầu đọc kỹ nội quy rồi mới lập topic. Tuy nhiên popup này bị che bởi khung tìm kiếm trên diễn đàn. Sau 1 hồi tìm hiểu mình được biết là do thuộc tính z-index trong css của khung tìm kiếm, và mình đã hạ thuộc tính z-index của khung tìm kiếm xuống, thế là popup thông báo đã không còn bị che bởi khung tìm kiếm nữa.

Cho nên hôm này mình xin chia sẻ 1 bài viết của ewebvn nói sâu hơn về thuộc tính này cho những ai đang tập tành học codeweb, đặc biệt là css. Nói nôm na thì thuộc tính z-index nó cũng giống layer trong Photoshop thôi :D

Giới thiệu

Để 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:

Xem qua bài học : Absolute position

#HTML

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

#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}

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-indexlà 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:

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

Tóm lược bài học

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.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 13: Tìm hiểu thuộc tính z-index trong CSS
Tags: z-index tìm hiểu z-index z-index css series css cơ bản serie css basic popup
Category: CSS Cơ bản
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về CSS Cơ bản,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha