Bài 15 – z-index (Layers) CSS

Home/Học viết code/CSS/Bài 15 – z-index (Layers) CSS

Tạo lớp bằng z-index (Layers)

CSS tạo ra không gian ảo 3 chiều bao gồm chiều cao, chiều rộng và chiều sâu. Chúng ta đã học về hai chiều rộng vào cao ở các bài học trước. Ở bài học này chúng ta sẽ học cách chuyển các phần tử thành các lớp chồng lên nhau.

Để đạt được như vậy, mỗi lớp sẽ được xác định vị trị chiều sâu z-index. Đây là cách khai báo để CSS sắp xếp các vị trí trên dưới cho các lớp, các lớp có z-index số càng cao sẽ nằm bên trên, nhỏ hơn sẽ nằm ở lớp dưới..

Bạn hãy quan sát các lá bài dưới đây, mỗi lá bài tượng trưng cho một lớp, các lớp có vị trí trên hoặc dưới tùy theo giá trị z-index của chúng:

Trong trường hợp trên, ta có các con số (1-5), bạn có thể sử dụng bất cứ những con số liên tiếp nào để xác định giá trị z-index, tất cả đều tuân theo thứ tự các lớp có số lớn ở trên và số nhỏ là lớp sẽ nằm dưới cùng.

Các lá bài ví dụ trên sẽ có code CSS như sau:

CSS

#ten_of_diamonds {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}

#jack_of_diamonds {
  position: absolute;
  left: 115px;
  top: 115px;
  z-index: 2;
}

#queen_of_diamonds {
  position: absolute;
  left: 130px;
  top: 130px;
  z-index: 3;
}

#king_of_diamonds {
  position: absolute;
  left: 145px;
  top: 145px;
  z-index: 4;
}

#ace_of_diamonds {
  position: absolute;
  left: 160px;
  top: 160px;
  z-index: 5;
}

HTML

<h1>Royal Flush</h1>

<div id="ten_of_diamonds">
<img src="https://cdn5.thietke.website/wp-content/uploads/2014/11/diamonds_10.gif" alt="10 of diamonds">
</div>

<div id="jack_of_diamonds">
<img src="https://cdn3.thietke.website/wp-content/uploads/2014/11/diamonds_jack.gif" alt="Jack of diamonds">
</div>

<div id="queen_of_diamonds">
<img src="https://cdn2.thietke.website/wp-content/uploads/2014/11/diamonds_queen.gif" alt="Queen of diamonds">
</div>

<div id="king_of_diamonds">
<img src="https://cdn3.thietke.website/wp-content/uploads/2014/11/diamonds_king.gif" alt="King of diamonds">
</div>

<div id="ace_of_diamonds">
<img src="https://cdn3.thietke.website/wp-content/uploads/2014/11/diamonds_ace.gif" alt="Ace of diamonds">
</div>

Xem ví dụ:

Phương pháp sử dụng khá đơn giản, nhưng có vô số cách để bạn áp dụng vào thực tế trong việc dàn trang thiết kế web, như sắp các hình ảnh, tiêu đề, đoạn văn theo lớp trước sau.

Tổng kết

Layers có thể sử dụng trong nhiều trường hợp, bạn hãy thử áp dụng z-index để tạo các tiêu đề có hiệu ứng sinh động, thay vì phải tạo chúng bằng các hình ảnh từ các chương trình đồ họa . Dĩ nhiên khi bạn sử dụng chữ thay cho vì dùng chữ tạo trong ảnh đồ họa, trang web của bạn sẽ tải nhanh hơn và việc này cũng thích hợp cho việc tối ưu trang web, giúp các cổ máy tìm kiếm dễ dàng hơn, giúp tăng thứ hạng trang web của bạn. Bài cuối cùng, chúng tôi sẽ tổng kết và đưa ra những lưu ý cần thiết khi viết code CSS.

Facebook Comments
2020-09-20T11:18:10+00:00Tháng Mười Một 2, 2014|Categories: CSS|Tags: , , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top