Magic school ( rất xin lỗi đã ngừng hoạt động )

Cám ơn đã ủng hộ, vui lòng kiểm tra hộp tin nhắn của bạn trước khi off hoàn toàn
 
Trang ChínhCalendarTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập
NoteĐóng lại

[Lập Trình Web] Thuộc Tính Z-index of CSSXem chủ đề cũ hơn Xem chủ đề mới hơn Go down
avatar[Thành viên] - unʞ - ɐʎd
Học sinh
Học sinh
Giới tính Giới tính : Nam
Bài gửi Bài gửi : 9
Reputation Reputation : 2
#1

Bài gửiTiêu đề: [Lập Trình Web] Thuộc Tính Z-index of CSS -Thu May 30, 2013 8:57 am
Xem lý lịch thành viên http://tsubasa.yourme.net

Hôm nay m sẽ giới thiếu các bạn về thuộc tính Z-index trong css,

về Z-index, nó có giá trị như sau

auto: Tự động sắp xếp thứ tự chồng nhau cho thành phần, đây là dạng mặc định.

Giá trị: Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị.

inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Để tìm hiểu về z-index, mình xin đưa ra ví dụ về việc sử dụng CSS absolute position để xếp chồng các thành phần lên nhau:

Mã HTML:

Code:
<div id="wapper">

      <div class="box1"></div>

      <div class="box2"></div>

      <div class="box3"></div>

</div>
Mã CSS:
Code:
#wapper{position: relative; width: 300px; height: 300px}

.box1,.box2,.box3{position: absolute; width: 150px; height; 150px}

.box1{top: 0; left: 0; background: blue}

.box2{top: 40px; left: 40px; background: green}

.box3{top: 80px; left: 80px; background: #cfcfcf}

Kết quả:




Nguyên lý:

Một thành phần A và B được xếp chồng lên nhau khi thành phần A được định vị trong không gian của thành phần B và ngược lại.
Ở ví dụ trên ta thấy: thành phần box2 có vị trí top: 40px và left: 40px do đó nó nằm trong không gian 150x150px của thành phần box1, do đó thành phần box2 được nằm chồng lên box1, tương tự như thế cho các thành phần còn lại.

Vai trò của Z-index?

Trong ví dụ trên: thành phần box3 chồng lên box2, box2 chồng lên box1 theo đứng thứ tự trong mã HTML, theo mặc định thành phần nào nằm sau sẽ được xếp chồng lên thành phần trước.
Làm sao để thay đổi thứ tự này?. Đó chính là vai trò của z-index trong CSS.

Thành phần nào có chỉ số z-index cao hơn sẽ nằm trên các thành phần khác.
Giá trị của thuộc tính z-index là một số thập phân, mặc định khi không dược khai báo, các thành phần có giá trị z-index là 0.
Trong ví dụ trên, giả sử bây giờ ta muốn thành phần box1 nằm trên box2 và box3, thì chỉ cần gán giá trị z-index cho thành phần box1:

Mã CSS:

Code:
.box1{top: 0; left: 0; background: blue; z-index: 1}

Bạn hãy thử để xem thử sự thay đổi nhé

Nắm được z-index, kết hợp với CSS position bạn có thể thiết kế được những giao diện khó và độ phức tạp cao. Tôi hy vọng rằng bài viết này có thể giúp ích cho bạn. Nếu bạn có bất kỳ câu hỏi nào hãy để lại comment bên dưới, tôi sẽ cố gắng trả lời những thắc mắc của bạn.

Clip hướng dẫn: https://www.youtube.com/watch?v=JW0mdYLi7Jw

Sưu tầm và kiến thức tự có

Tài sản của unʞ - ɐʎd


Pet :
Pet :




avatar[Thành viên] - Phong
Magic School
Magic School
Giới tính Giới tính : Nam
Cung hoàng đạo Cung hoàng đạo : Xử Nữ
Bài gửi Bài gửi : 1856
Reputation Reputation : 42
Age Age : 17
#2

Bài gửiTiêu đề: Re: [Lập Trình Web] Thuộc Tính Z-index of CSS -Thu May 30, 2013 9:02 am
Xem lý lịch thành viên http://magazine.forumvi.com

không có demo code à
mà thôi +1 nhé

Chữ kí của Phong

Nice to meet you





avatar[Thành viên] - unʞ - ɐʎd
Học sinh
Học sinh
Giới tính Giới tính : Nam
Bài gửi Bài gửi : 9
Reputation Reputation : 2
#3

Bài gửiTiêu đề: Re: [Lập Trình Web] Thuộc Tính Z-index of CSS -Thu May 30, 2013 9:05 am
Xem lý lịch thành viên http://tsubasa.yourme.net

@byb: HD sơ lược về 1 thuộc tính thôi mà, đâu phải share ^^~

Tài sản của unʞ - ɐʎd


Pet :
Pet :




[Thành viên] - Sponsored content

#4

Bài gửiTiêu đề: Re: [Lập Trình Web] Thuộc Tính Z-index of CSS -

Tài sản của Sponsored content




[Lập Trình Web] Thuộc Tính Z-index of CSS

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang
Trang 1 trong tổng số 1 trang
* Không dùng những ngôn từ thiếu lịch sự.
* Bài viết sưu tầm nên ghi rõ nguồn.
* Tránh spam nhảm không liên quan đến chủ đề.

Yêu cầu viết tiếng Việt có dấu.


Permissions in this forum:Bạn không có quyền trả lời bài viết
Magic school ( rất xin lỗi đã ngừng hoạt động ) :: Sân trường :: Hướng dẫn Code :: phpBB-