05/10/2018, 10:57

z-index, Layers trong CSS

Chào các bạn, chúng ta đã bít định dạng css qua chiều dài, chiều rộng còn một phần mà các bạn cũng cần phải quan tâm đó là chiều sâu của các đối tượng hay layers trong css và hôm này chúng ta sẽ trình bày về vấn đề này. Layers (lớp) z-index Layer hay là lớp là xét các thành phần HTML theo ...

Chào các bạn, chúng ta đã bít định dạng css qua chiều dài, chiều rộng còn một phần mà các bạn cũng cần phải quan tâm đó là chiều sâu của các đối tượng hay layers trong css và hôm này chúng ta sẽ trình bày về vấn đề này.

Layers (lớp) z-index

Layer hay là lớp là xét các thành phần HTML theo chiều sâu nghĩa là bạn qui định đối tượng này có đè chồng lên đối tượng kia hay không, để làm được điều này người ta dùng z-index trong css.

z-index được qui định bởi các con số, và thành phần nào mang số cao hơn sẽ nằm trên thành phần có số nhỏ hơn. Ví dụ:

 

Qua đoạn code trên thì .layer1 sẽ nằm dưới .layer2

Để dễ dàng hình dung mình cho bạn một ví dụ sau:

Người ta cho bạn một file HTML trình bày cái menu và một content, người dùng cho chuột vào menu hiển thị các mục con để chọn mà các mục này lại nằm dưới content làm cho người dùng không có cách nào click vào các mục này được.

z-index dưới

z-index dưới

Để giải quyết tình huống này bạn dùng z-index.

 

Lúc này kết quả ta có:

z-index trên

z-index trên

Kết luận: OK vậy là đã tìm hiểu xong về layer trong css, cái nào trên thì cho z-index lớn hơn thì được. hii… góp ý qua comment nha a e.

VN:F [1.9.22_1171]
Rating: 8.4/10 (7 votes cast)
z-index, Layers trong CSS, 8.4 out of 10 based on 7 ratings
Tags:css, css cơ bản, css-html
Bài liên quan

z-index, Layers trong CSS

Chào các bạn, chúng ta đã bít định dạng css qua chiều dài, chiều rộng còn một phần mà các bạn cũng cần phải quan tâm đó là chiều sâu của các đối tượng hay layers trong css và hôm này chúng ta sẽ trình bày về vấn đề này. Layers (lớp) z-index Layer hay là lớp là xét các thành phần HTML theo ...

Vũ Văn Thanh viết 2 tuần trước

[BÀI 12]Thuộc tính z-index trong CSS

Thuộc tính z-index trong CSS. Cú pháp : z-index : ‘giá trị’; Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí. Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị ...

Hoàng Hải Đăng viết 2 tuần trước

Z-index: Hiển thị các element đè lên nhau trong CSS

Chắc hẳn các bạn đã từng cố gắng đặt z-index cho element tuy nhiên lại không có kết quả như mong đợi. Đây là một thuộc tính tưởng chừng đơn giản nhưng đôi khi lại khá là confuse. Bài viết này sẽ giải thích rõ hơn về cách mà z-index hoạt động. Thứ tự stacking mặc định Trước tiên ta cùng xem xét ...

Trịnh Tiến Mạnh viết 09:28 ngày 07/09/2018

Thuộc tính z-index trong CSS

Hướng dẫn làm menu dọc hai cấp với CSS Thuộc tính Position:fixed trong CSS Thuộc tính After và Before trong CSS Thuộc tính Clear:both,left,right trong CSS Thuộc tính z-index trong CSS được sinh ra nhằm giải quyết cấp độ hiển thị của các thẻ HTML lên trình duyệt Browser. Video học ...

Tạ Quốc Bảo viết 17:32 ngày 04/09/2018

Layer trong CSS | Thuộc tính z-index trong CSS

CSS cung cấp cho bạn khả năng tạo các Layer đa dạng và có thể hiển thị chồng lên nhau, tức là phần tử này chồng lên phần tử khác. Bạn có thể thực hiện việc này thông qua thuộc tính z-index trong CSS. Thuộc tính z-index được sử dụng đi kèm với thuộc tính position để tạo các Layer. Sử dụng ...

Bùi Văn Nam viết 12:15 ngày 14/08/2018
0