Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Web design] Tìm hiểu về thuộc tính z-index trong CSS

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi Phạm Hữu Dư, 20/3/13.

Lượt xem: 14,089

  1. Phạm Hữu Dư phamhuudu.com

    Mấy bữa nay đang tính cải thiện thêm 1 cái popup xuất hiện khi thành viên muốn tạo chủ đề mới sẽ thấy popup thông báo yêu cầu đọc kỹ nội quy rồi mới lập topic. Tuy nhiên popup này bị che bởi khung tìm kiếm trên diễn đàn. Sau 1 hồi tìm hiểu mình được biết là do thuộc tính z-index trong css của khung tìm kiếm, và mình đã hạ thuộc tính z-index của khung tìm kiếm xuống, thế là popup thông báo đã không còn bị che bởi khung tìm kiếm nữa.

    Cho nên hôm này mình xin chia sẻ 1 bài viết của ewebvn nói sâu hơn về thuộc tính này cho những ai đang tập tành học code web, đặc biệt là css. Nói nôm na thì thuộc tính z-index nó cũng giống layer trong Photoshop thôi :D

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

    HTML:
    <div id="wapper">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
</div>
    Code:
    1 #wapper{position: relative; width: 300px; height: 300px}
2 .box1,.box2,.box3{position: absolute; width: 150px; height; 150px}
3 .box1{top: 0; left: 0; background: blue}
4 .box2{top: 40px; left: 40px; background: green}
5 .box3{top: 80px; left: 80px; background: #cfcfcf}
    Kết quả:

    [​IMG]

    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:
    Code:
    1 .box1{top: 0; left: 0; background: blue; 
	
z-index: 1}
    [​IMG]

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

    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.

    Nguồn tham khảo: ewebvn.com​

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Phạm Hữu Dư, 20/3/13
    #1
    blacklarson, Rocker2012, A3ersxSOnes và 12 người khác thích bài viết này.
  2. banbaonylong

    banbaonylong Ko phải assmin

    ông coi lại lớp css xenOverlay memberCard appleEffect và cái ads nhé =.=

    [​IMG]
    banbaonylong, 21/3/13
    #2
  3. One One

    One One Thành viên cấp 1

    Em hiểu được sơ sơ thôi :)
    One One, 22/3/13
    #3
  4. Azenis Bm

    Azenis Bm Thành viên cấp 1

    Azenis Bm, 21/5/13
    #4
  5. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

    Ha ha giờ em mới b iết,. không trách vào nhiều cái xem code đôi khi có cái dòng z-index mà chả hiểu nó để làm gì,.. nhưng cho em hỏi sao đôi khi nó để thông số là 100 luôn anh...
    ví dụ như z-index: 100;
    Đoilơ ViệtDesigner, 14/6/13
    #5
  6. nhokcoi18

    nhokcoi18 Mới đăng kí

    khó quá
    nhokcoi18, 21/6/13
    #6
  7. Phan Văn Phú

    Phan Văn Phú Thành viên cấp 1

    .box1,.box2,.box3{position: absolute; width: 150px; height; 150px}
    Anh Dư chỉnh lại dấu ; thành : ở phần css này mới đúng
    Đoilơ ViệtDesigner
    z-index:100 thì 100 lấy làm số tròn để dễ tính cho những trường hợp khác ,giả sử box1 có z-index là 100 thì nó sẽ đè lèn box2 và box3 .
    Nếu bạn muốn box3 đè lên box1 rồi box1 đè lên box 2 thì code như sau :
    <style>
    #wapper {
    position: relative;
    width: 300px;
    height: 300px;
    }
    .box1, .box2, .box3 {
    position: absolute;
    width: 150px;
    height: 150px;
    }
    .box1 {
    top: 0;
    left: 0;
    background: blue;
    z-index:1000;
    }
    .box2 {
    top: 40px;
    left: 40px;
    background: green;
    }
    .box3 {
    top: 80px;
    left: 80px;
    background: #cfcfcf;
    z-index:2000;
    }
    </style>
    Thỉ cái box2 nó mặc định z-index là 0 nên sẽ nằm dưới cùng .
    Mà thường thì khi code css để giá trị lớn cho z-index sẽ dễ tính hơn cho nhiều trường hợp .Vì ở đây không dùng gía trị thập phân nên đa số thường lấy giá trị lớn .Miễn sao nó giaỉ quyết được vấn đề thì ok.
    Nếu áp dụng thêm trường hợp khi rê chuột vào box 2 thì nó sẽ đè lên cả box1 và box3 thì dùng lệnh hover cùng với z-index thì quá tuyệt , code thêm vào đoạn trên như sau :
    .box2:hover {
    z-index:3000;
    }
    Demo online này :
    Code:
    http://phanvanphu.com/baitap/zindex.html
    Phan Văn Phú, 21/6/13
    #7
    Đoilơ ViệtDesigner thích bài viết này
  8. huyhoang_461900

    huyhoang_461900 Thành viên cấp 1

    Thanks bạn nhiều!
    huyhoang_461900, 26/6/13
    #8
  9. snow92

    snow92 Mới đăng kí

    cám ơn chia sẽ của anh
    snow92, 7/1/14
    #9
  10. giayvun

    giayvun Thành viên cấp 1

    Cho mình xin bổ sung một chút xíu, z-index vẫn có một số điểm lưu ý nhỏ:

    giả sử mình có 3 div:
    <div class="fixed"></div>
    <div class="relative">
    <div class="absolute">
    .absolute là con của .relative.
    </div>
    </div>

    Với css:
    .fixed {
    position: fixed; z-index: 3;
    }
    .relative{
    position: relative; z-index: 1;
    }
    .absolute {
    position: absolute; /*position: relative; (cái nào cũng đc)*/
    z-index: 100;
    }

    a/ z-index của ".relative" lớn hơn của ".fixed" => cả 2 div dưới đều đè lên ".fixed".
    b/ z-index của ".relative" nhỏ hơn của ".fixed" => ".absolute" không đè lên .fixed được mặc dù z-index của ".absolute" lớn hơn.
    c/ ".relative" không có đặt z-index => ".absolute" có thể đè lên .fixed nếu z-index lớn hơn.
    giayvun, 31/10/14
    #10
    Phạm Hữu Dư thích bài viết này
  11. Texture_SSK

    Texture_SSK Thành viên cấp 2

    Bác Dư viết bài còn thiếu rồi.
    z-index chỉ hoạt động với các element có cùng thuộc tính position
    Texture_SSK, 31/10/14
    #11
  12. Heart

    Heart Mới đăng kí

    Thuộc tính position có bao nhiêu giá trị ? Khi nào dùng giá trị fixed, khi nào dùng giá trị relative, khi nào dùng giá trị absolute,... ?
    Heart, 25/11/14
    #12
  13. Nighter

    Nighter Thành viên cấp 3

    postion: relative
    trong đó position là thuộc tính, relative là giá trị
    ko biết mà cũng nói ng khác ko biết j?
    Nighter, 25/11/14
    #13
Từ khóa:

Ủng hộ diễn đàn