Thuộc tính z-index trong CSS – những điều bạn chưa biết

Thuộc tính z-index trong CSS nhìn có vẻ đơn giản, nhưng có nhiều điều để khám phá bên trong nó nếu bạn thực sự muốn hiểu nó làm việc thế nào. Trong tutorial này chúng ta sẽ làm rõ cách hoạt động bên trong z-index bằng một vài ví dụ.

CSS cung cấp 3 kiểu “position schemes” khác nhau cho bố cục của các hộp:

  • normal document flow( dòng chảy trang )
  • floats
  • absotute positioning

Kiểu “positioning schemes” cuối cùng loại bỏ 1 phần tử khỏi dòng chảy thông thường và dựa vào thiết lập của người lập trình để  xác định nơi hiển thị của phần tử.

Bạn cho nó giá trị top,left, bottom, right để định vị phần tử trong không gian 2 chiều, nhưng CSS cũng cho phép bạn đặt lên nó không gian thứ 3 sử dụng thuộc tính z-index.

Nhìn bề ngoài, z-index trông như 1 thuộc tính dễ dàng để sử dụng. Bạn đặt giá trị xác định nơi trục thứ 3 của phần tử được định vị và xong.

Phía dưới bề mặt  có nhiều thứ phải tìm hiểu, bao gồm 1 số quy tắc để những phần tử ngồi trên phần tử khác.

Z-index Basics

x-y-z-axis1

Không gian 3 chiều

Tôi chắc chắn là bạn đã quen với không gian 3 chiều. Chúng ta có trục x, cái thường sử dụng để mổ tả chiều ngang, trục y để mô tả chiều dọc và trục z để mô tả cái xảy ra vào và ra của trang hoặc màn hình trong trường hợp của chúng tôi

Chúng ta có 1 vài câu hỏi chưa có lời giải:

  • Cái nào xuất hiện ở trên khi 1 phần tử được định vị với 1 z-index chồng chéo lên 1 phần tử trong dòng chảy trang?
  • Cái nào xuất hiện ở trên khi 1 phần tử được định vị và 1 được floated?
  • Điều gì xảy ra khi những phần tử được định vị được lồng vào bên trong phần tử được định vị khác?

Để trả lời những câu hỏi này chúng ta cần hiểu nhiều hơn về cách z-index làm việc, đặc biệt là “stacking context”, “stacking levels và “stacking orders”.

Stacking Contexts và Stacking Levels

Stacking contexts và stacking levels có thể có 1 chút khó khăn để hiểu, vì vậy ta có 1 ví dụ, 1 bức ảnh cái bàn với 1 vài vật dụng ở trên nó. Cái bàn mô tả cho 1 stacking context. Nếu có 1 cái bàn thứ 2 đặt cạnh cái thứ nhất thì nó mô tả 1 stacking context khác.

stacking-contexts1

Giờ hãy tưởng tượng bàn thứ nhất có 4 khối nhỏ, tất cả dặt trực tiếp lên bàn. Trên 4 khối đó là 1 tấm kính và trên tấm kính là 1 bát trái cây. Khối, tấm kính và bát trái cây mỗi cái mô tả 1 stacking level khác nhau ở trong 1 stacking context là cái bàn.

Một stacking context đơn mặc định được tạo cho mọi trang web. Gốc của bối cảnh này( cái bàn) là phần tử html. Mọi thứ bên trong thẻ html nằm trên 1 stacking level trong stacking context mặc định(đối tường nằm trên bàn).

Khi bạn gán 1 giá trị z-index khác với giá trị auto, bạn tạo 1 stacking context mới với stacking levels mới độc lập với stacking context và stacking levels khác trên trang. Bạn mang 1 cái bàn khác tới căn phòng cho các đối tượng đặt lên nó.

Stacking Order

Cách dễ dàng nhất để hiểu stacking order là cho 1 ví dụ đơn giản, vì vậy để đơn giản, chúng ta sẽ không xem xét tới những phần tử được định vị vào lúc này.

Mọi trang web đơn gian đều có các thẻ như <html>, <head>, <body>, …Bạn sẽ tìm trên mọi trang web có 1 <div> đơn. Trong file CSS của bạn cài đặt background-color cho phần tử html là blue. Trên <div>, bạn đặt gái trị chiều dài, chiều rộng và 1 background-color là red.

Bạn mong đợi thấy cái gì khi bạn tải trang web?

Chắc chắn sẽ là 1 màn hình màu xanh ngoại trừ 1 khối màu đỏ với kích thước bạn đặt chiều dài chiều rộng cho <div>.

Trong trường hợp đơn giản trên, các quy tắc nói rằng các khối con cháu trong dòng chảy div ngồi ở cấp độ cao hơn so với background và borders của phần tử gốc html. Bạn nhìn thấy <div> ở trên bởi vì nó có stacking level cao hơn.

Trong ví dụ ở trên chỉ chứ 2 level stack, có 7 cấp độ đối với mỗi stacking context:

  1.  Background and borders – của phần tử hình thành nên stacking context. Cấp độ thấp nhất trong stack.
  2.  Giá trị Z-index âm – stacking contexts của các phần tử con cháu với giá trị z-index âm.
  3.  Các phần tử khối (block boxes) – trong dòng chảy, các phần tử con cháu không được định vị
  4.  Các phần tử floated – phần tử không được định vị floats.
  5.  Các phần tử trong dòng (inline boxes) – trong dòng chảy, các phần tử con cháu không được định vị
  6.  Z-index = 0 – các phần tử được định vị. Sẽ hình thành stacking context mới.
  7.  Z-index dương – các phần tử được định vị. Cấp độ cao nhất của stack.

stacking-order1

Xem xét HTML, CSS bên dưới. Div.two sẽ hiển thị trên hay dưới div.four?

HTML

CSS

Mặc dù div.two có z-index lớn hơn (100), nó thực sự nằm dưới div.four (z-index = 50) trên trang. Bạn có thể thấy kết quả ở trên trong hình bên dưới. Borders đen và vàng mô tả 2 stacking contexts khác nhau.stacking1

div.two được chưa trong div.one, z-index của nó quan hệ với div.one. Trong thực tế cái chúng ta thực sự có như sau:

  • .one – z-index = 10
  • .two – z-index = 10.100
  • .three – z-index = 10.150
  • .four – z-index = 50

Chúng ta vừa hoàn thành việc di chuyển div.one và mọi thứ nó chứa xuống dưới div.four. Mọi thứ trong div.one sẽ luôn hiển hị dưới div.four

Tổng kết

Hi vọng qua bài này mọi người có thể hiểu rõ và sâu hơn về thuộc tính z-index. Từ đó áp dụng vào các project của mình. Chúc mọi người thành công!!!

Tham khảo : tutsplus.com

 

 

Share
Share