Các yếu tố trong HTML được định vị trên trục z theo bối cảnh xếp chồng của chúng. Show Theo mặc định, một trang có 1 bối cảnh xếp chồng - phần tử HTML - và tất cả trẻ em thuộc ngữ cảnh xếp chồng đều được định vị theo thứ tự DOM của chúng. Tuy nhiên, một bối cảnh xếp chồng mới có thể được tạo trên một phần tử khi các thuộc tính CSS nhất định được áp dụng. Các thuộc tính như
<!DOCTYPE html> <html> <head> <style> div { position: absolute; } #box div { background-color: orange; border: 2px solid yellow; width: 100px; height: 100px; opacity: 0.3; } div#demo { opacity: 1; background-color: coral; z-index: 1; animation: myanim 3s; } @keyframes myanim { 30% { z-index: 3; } } </style> </head> <body> <h2>CSS z-index property</h2> <div id = "box"> <div id = "demo"></div> <div style = "top:20px;left:20px;z-index:1;">One</div> <div style = "top:40px;left:40px;z-index:2;">Two</div> <div style = "top:60px;left:60px;z-index:3;">Three</div> <div style = "top:80px;left:80px;z-index:4;">Four</div> <div style = "top:100px;left:40px;z-index:5;">Five</div> <div style = "top:120px;left:60px;z-index:6;">Six</div> <div style = "top:140px;left:80px;z-index:7;">Seven</div> </div> </body> </html>0 không khi bạn nhận xét hoạt hình, nên nó có một bối cảnh xếp chồng mới mặc định là trên bối cảnh xếp chồng của cha mẹ (bao gồm phần tử <!DOCTYPE html> <html> <head> <style> div { position: absolute; } #box div { background-color: orange; border: 2px solid yellow; width: 100px; height: 100px; opacity: 0.3; } div#demo { opacity: 1; background-color: coral; z-index: 1; animation: myanim 3s; } @keyframes myanim { 30% { z-index: 3; } } </style> </head> <body> <h2>CSS z-index property</h2> <div id = "box"> <div id = "demo"></div> <div style = "top:20px;left:20px;z-index:1;">One</div> <div style = "top:40px;left:40px;z-index:2;">Two</div> <div style = "top:60px;left:60px;z-index:3;">Three</div> <div style = "top:80px;left:80px;z-index:4;">Four</div> <div style = "top:100px;left:40px;z-index:5;">Five</div> <div style = "top:120px;left:60px;z-index:6;">Six</div> <div style = "top:140px;left:80px;z-index:7;">Seven</div> </div> </body> </html>0). Vì vậy, để có được hộp <!DOCTYPE html> <html> <head> <style> div { position: absolute; } #box div { background-color: orange; border: 2px solid yellow; width: 100px; height: 100px; opacity: 0.3; } div#demo { opacity: 1; background-color: coral; z-index: 1; animation: myanim 3s; } @keyframes myanim { 30% { z-index: 3; } } </style> </head> <body> <h2>CSS z-index property</h2> <div id = "box"> <div id = "demo"></div> <div style = "top:20px;left:20px;z-index:1;">One</div> <div style = "top:40px;left:40px;z-index:2;">Two</div> <div style = "top:60px;left:60px;z-index:3;">Three</div> <div style = "top:80px;left:80px;z-index:4;">Four</div> <div style = "top:100px;left:40px;z-index:5;">Five</div> <div style = "top:120px;left:60px;z-index:6;">Six</div> <div style = "top:140px;left:80px;z-index:7;">Seven</div> </div> </body> </html>4 vào nó. Để triển khai hoạt hình trên thuộc tính Z-Index với CSS, bạn có thể thử chạy mã sau- Thí dụTrong ví dụ này, thứ tự xếp chồng của các lớp được sắp xếp lại bằng <!DOCTYPE html> <html> <head> <style> div { position: absolute; } #box div { background-color: orange; border: 2px solid yellow; width: 100px; height: 100px; opacity: 0.3; } div#demo { opacity: 1; background-color: coral; z-index: 1; animation: myanim 3s; } @keyframes myanim { 30% { z-index: 3; } } </style> </head> <body> <h2>CSS z-index property</h2> <div id = "box"> <div id = "demo"></div> <div style = "top:20px;left:20px;z-index:1;">One</div> <div style = "top:40px;left:40px;z-index:2;">Two</div> <div style = "top:60px;left:60px;z-index:3;">Three</div> <div style = "top:80px;left:80px;z-index:4;">Four</div> <div style = "top:100px;left:40px;z-index:5;">Five</div> <div style = "top:120px;left:60px;z-index:6;">Six</div> <div style = "top:140px;left:80px;z-index:7;">Seven</div> </div> </body> </html>
HTML
DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí! Zoe Gillenwater nhắc nhở chúng ta rằng nó chỉ là một con số, vậy tại sao không? Vì vậy, rõ ràng tôi đã làm con ma hình tường ngu ngốc này. Liên kết trực tiếp → Bài viết đầu tiên của hướng dẫn này, xếp chồng mà không có thuộc tính Z-index, giải thích cách sắp xếp xếp chồng theo mặc định. Nếu bạn muốn tạo một thứ tự xếp chồng tùy chỉnh, bạn có thể sử dụng thuộc tính Thuộc tính Note: Thí dụTrong ví dụ này, thứ tự xếp chồng của các lớp được sắp xếp lại bằng HTML
CSS
Kết quảXem thêm
Những thuộc tính CSS nào không thể hoạt hình?Bạn không thể làm động chiều cao của một yếu tố từ chiều cao tự động, tự động được tính toán (ví dụ: một phần tử chứa đầy văn bản), mặc dù có thể làm động cho chiều cao tối thiểu của nó.the height of an element from an auto-computed, natural height (e.g. an element filled with text), although is is possible to animate its min-height.
Bạn có thể làm động CSS Grid không?Nó nói rằng chúng ta có thể làm động các hàng lưới và cột là một danh sách đơn giản về các giá trị độ dài, tỷ lệ phần trăm hoặc calc.Hoạt hình với CSS liên quan đến việc sử dụng các khung chính.Hoạt hình máy tính, nói chung, phải sử dụng phép nội suy để điền vào các khung giữa các khung chính để hình ảnh động trơn tru.we can animate grid rows and columns which are a simple list of length, percentage or calc values. Animations with CSS involve the usage of keyframes. Computer animation, in general, has to make use of interpolation to fill in frames between the keyframes so the animation is smooth.
Những thuộc tính nào bạn có thể làm động CSS?Một số thuộc tính CSS có thể được hoạt hình bằng cách sử dụng hoạt hình CSS hoặc chuyển tiếp CSS ... -moz-outline-radius.. -moz-outline-radius-bottomleft.. -moz-outline-radius-bottomright.. -moz-outline-radius-topleft.. -moz-outline-radius-topright.. -ms-grid-columns.. -ms-grid-rows.. -webkit-line-clamp.. Hình ảnh CSS có thể được hoạt hình không?Để tạo hoạt hình CSS, bạn cần ba điều: một yếu tố HTML thành Animate, một quy tắc CSS liên kết hoạt hình với yếu tố này và một nhóm các khung chính xác định các kiểu ở đầu và kết thúc hoạt hình.Bạn cũng có thể thêm khai báo để tùy chỉnh thêm hoạt hình của bạn, như tốc độ và độ trễ. |