Tìm hiểu về Z-index trong CSS
- September 16, 2009
- 46 comments
Z-index là một tính năng khá hay trong CSS và có thể giúp bạn khắc phục nhiều thành phần khó trong thiết kế giao diện và nó cũng có thể tạo ra những hiệu ứng thú vị cho giao diện. Tuy nhiên Z-index nếu không hiểu rõ nguyên lý của nó thì cũng hơi khó sử dụng. Sau khi học xong video tutorial này, bạn có thể tự tin hơn với Z-index
Thời lượng:19:08
Link Download định dạng .avi chất lượng cao: Đang cập nhật
File Size:
Các anh có thể up lại cho em xin link down video này được không ạ.thanks!
Ai sửa mình đoạn code này với. Duyệt bằng IE thì hover qua ảnh thì đường link bên tay trái hiển thị trên ảnh. Mặc dù mình để z-index “đường link “nhỏ hơn.
Có thể do lỗi mình để mặc định có 2 “position: relative” trong cùng 1 trang
Demo: http://duoclieu.oni.cc/Hienvi2/thanviphau_ichmau.html
Download: 726kb
http://www.mediafire.com/?qn9y8vby0as5u
Thanks!
Anh dùng add on gì mà code trên Chrome vậy ạh.
Thưa anh ! em là sinh viên năm cuối em thích về web và cũng đã làm web nhưng mà làm web free anh ak giờ em cũng biết đc một số ngôn ngữ lập trình nhưng mà về web thì em chưa có nhiều kinh nghiệm . Mong anh có thể hướng dẫn về tạo CSDL đơn giản như Access hoặc SQL càng tốt anh ak…mong anh giúp em để em làm cái đồ án về web…thank anh trước nhé…….^-^
Bạn thêm dòng z-index ngay tại CSS mà bạn hover. VD
img#a { z-index:1000 }
img#a:hover { z-index:1000 }
Ái chà, mình gặp 1 vấn đề khi làm bài tập này.
Như cái hình “Alien” của anh DW, mình cũng làm nó lòi lòi lên. Và mình cũng thêm 1 tí mắn muối vô nữa để khi hover lên cái hình đó thì hiện ra 1 hình khác. Nghiệt nỗi khi hover vô hình “Alien” đó, nó cũng hiện lên hình thứ 2 nhưng là hiện phía dưới hình”Alien” dù mình có set z-index cao hơn đi chăng nữa.
A. DW giúp mình 1 phát nhá
Ah, demo có j mình up lên sau.
Cảm ơn bạn nhiều!
Đây là link download: http://www.mediafire.com/?n2iyiidjizm
Mình xem phần z-index ko được, bạn có thể post lại được ko? Mình rất thích website này. Rất chi tiết và bạn cũng rất nhiệt tình
IDM thôi
Download cai video này ? nhỉ, ai chỉ tui với.
Anh à.. em dùng float để định vị các DIV không dùng position ..Thì em có dùng Z-index được không anh
Chắc bác ấy đang sửa gì đấy , còn video này có lâu rồi
Sao bài này chưa cập nhật video nữa vậy anh
em đang làm captcha nhưng chổ header(‘content-type:image/png); lại báo lỗi.anh giup e với
Em học CSS, lên google tình cờ biết trang của anh. Do đang là sinh viên nên ko có nhiều tiền học ngoài, ở trường thì dạy rất ít,nhất là Việt Nam mình, chỉ tự thân vận động thôi. Cảm ơn anh nhiều lắm. Sao anh ko đặc vài baner quảng cáo, bọn em muốn làm cái gì đó cho anh, dù chỉ tý chút thôi
@RCSF: em xem lại phút thứ 11:32 anh có giải thích rõ ràng mà. Đâu chỉ có là relative mà cả fixed, absolute và relative mà.
Còn cái nữa là khi vị trí là relative thì vẫn có thể dùng top, right, bottom và left để định vị trí chứ không phải dùng margin.
Mới xem lại thì bác DW nói chuẩn rồi mà : trừ cái position: static ; thôi .
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed
Anh có nói là muốn dùng z-index thì position phải là relative
Nhưng em làm bằng absoulte vẫn được mà bác .
Nếu dùng relative thì dùng margin để định vị trí
Còn absolute thì dùng top-left-… để định vị trí
là có thể z-index thoải mái
Em hiểu như thế . Anh xem có vấn đề gì không ?
@Trí: Thì thế mới gọi là IE chứ . có chút đơn giản vậy mà nó lại không hỗ trợ .
Bạn đọc bài này nè: http://www.izwebz.com/video-tutorials/nhung-cach-bo-tron-goc/
anh ơi cho em hỏi các thuộc tính:
-moz-border-radius-bottomleft,
-moz-border-radius-bottomright,
-moz-border-radius-topleft,
-moz-border-radius-topright của label trong form comment này sang IE nó chuyển label thành hình vuông hết.Có cách nào làm cho nó bo tròn lại như bên firefox ko anh?
Anh ơi, web em đang xây dựng cần có những dropdown menu rất là dài, và trong body web có những clip chạy bằng flash player, đôi khi là iframe flash player. Những cái flash đó tự động nằm ở layer cao nhất, làm khi holver menu, các dropdown menu bị che khuất bên dưới rất khó chịu. Em đã thử dùng Z-index nhưng mà không giải quyết được, anh có thể cho em gợi ý được không. Như em thấy trang này : http://www.arsenal.com/news/news-archive/manchester-utd họ xử lý rất tốt, các menu đều nằm bên trên flash
thank anh
Bạn thử cái này xem. lần trước mình cũng bị và đã sửa được lỗi này rồi. http://ddth.com/showthread.php?t=43028
Nếu mà embed Flash vào thì cách này đc, còn iframe flash thì cái này chịu
tại sao ma e cu xem đến phút thứ 5 thì nó lại bị lỗi là sao a?
Cho em hỏi trục Oy là trục tung hay trục hoành vậy. Em nhớ nó là trục tung mà!
Ặc! chắc anh lộn
) quê quá!
anh cố gắng học asp.net đi anh rồi làm TUT
nhưng học asp.net tựa c#.net đừng tựa vb.net
Tôi cũng ước là mình biết về asp.net vì thấy cũng có nhiều người quan tâm và đây cũng là một trình rất mạnh. Chỉ tiếc tôi chưa tìm hiểu về nó bao giờ nên không làm tut được
Anh oi. E moi biet trang IZWEBZ nay thui. Nhung cam thay rat thich. Anh co the lam mot Video ve Webparts(trong ASP.NET) khong? Em thay van de nay cung kha hay…:)
Mà bác cũng hay ờ ờ quá
Bác tự cười hơi bị giỏi đấy, hehe =))