Ví dụ CSS Grid Bài 8: Layer items trong Grid

Trong CSS thông thường, chúng ta sử dụng thuộc tính z-index để xếp chồng các layer lên trên nhau.

Thuộc tính này cũng được kế thừa trong CSS Grid. Do đó, bạn có thể sử dụng z-index để tạo các layer để làm đẹp website của mình.

Chúng ta sẽ xem demo code trong codepen. Tôi sẽ giải thích cách nó hoạt động.

Trong Grid này item f có vị trí như sau:

    .f {
        grid-column: col 3 / span 3;
        grid-row: row 2  ;
        background-color: rgba(49,121,207, 0.5);
    }

Ở đây tôi đã để màu dạng rgba() để có thể nhìn được item phía dưới nó.

Do thuộc tính của item d là:

    .d {
        grid-column: col 2 / span  3 ;
        grid-row: row 2 ;
    }

Vì thế 2 đối tượng bị chồng lên nhau. Và theo mặc định, item phía sau sẽ chồng lên trước của item phía trước.

Tôi đã để thuộc tính z-index cho toàn bộ class .box là z-index: 10;

Sau đó tôi thêm thuộc tính z-index: 20; vào class .f

Bạn vẫn thấy khối f chồng lên khối d như vậy đúng không?

Thực tế thuộc tính z-index đã làm việc vì z-index của item f là 20 lớn hơn z-index của item d (item d kế thừa i-index: 10; của class .box).

Do đó item f nằm trên item d.

Để bạn hiểu rõ hơn về thuộc tính z-index, hãy thử sửa lại thuộc tính z-index của item f như sau: z-index: 9;

Kết quả hiển thị như sau:

item f đã xếp dưới item d do thuộc tính z-index: 9; nhỏ hơn 10.

Vậy là bạn đã hiểu về cách sắp xếp các layer trong css Grid. Thật đơn giản phải không nào.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau trước khi sang bài tiếp theo.

Bài tiếp theo: Ví dụ CSS Grid Bài 9: Thuộc tính positon