Thuộc tính 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 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.

Để 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ó:

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.