Thuộc tính z-index, Layers trong CSS

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.

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.

Bạn thấy bài viết này như thế nào?: 
Average: 10 (1 vote)
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 

So sánh Drupal vs SharePoint từ Developer's Viewpoint

After working in organizations that adopted both Drupal and SharePoint, I have been asked on several occasions my thoughts on the differences between the two platforms

Giới thiệu sơ lược Apache Hadoop

Giới thiệu sơ lược Apache Hadoop

Các cỗ máy tìm kiếm như Google chọn lọc thông tin và trả về kết quả trong tích tắc. Kỹ thuật thường được sử dụng là chia nhỏ nhiệm vụ(job) để hàng loạt máy tính cùng nhau thực hiện. Kỹ thuật này cũng được biết đến với tên gọi Cloud computing. Tìm hiểu hadoop sẽ giúp chúng ta làm quen với Cloud computing.

Gửi hình ảnh qua email từ iPhone, iPod touch, và iPad

Gửi hình ảnh qua email từ iPhone, iPod touch, và iPad

Bạn đã chụp một vài bức ảnh xinh xắn bằng iPhone, iPod touch hoặc iPad của mình, và háo hức muốn gửi cho bạn bè...

Công ty diệt chuột T&C

 

Diet con trung