RSSCSS

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.

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ụ:

<!--
.Layer1{
     z-index: 10;
}

.Layer2{
     z-index: 100;
}
-->

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.

<!--
.menu ul{
     z-index:10;
}
.content{
     z-index: 5;
}
-->

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.2/10 (5 votes cast)
z-index, Layers trong CSS, 8.2 out of 10 based on 5 ratings

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu