Ví dụ như có vị trí tuyệt đối của 2 div, người ta có thể đặt div đầu tiên sau giây bằng cách đặt chỉ số z của div đầu tiên cao hơn chỉ số thứ hai của div. Chúng ta có thể đạt được hành vi như vậy bằng cách sử dụng translationZ() hoặc translate3d?Có thể sử dụng css3 translateZ() thay vì z-index không?
Trả lời
Câu trả lời ngay bây giờ, sau 3 năm, là bạn có thể. Bạn cần sử dụng transform-style: preserve-3d;
trên phụ huynh, but it's possible.
.container {
transform-style: preserve-3d;
}
.test1 {
width: 500px;
height: 500px;
background: red;
transform: translate3d(0, 0, 1px);
}
.test2 {
width: 500px;
height: 500px;
background: green;
left: 250px;
top: 250px;
position: absolute;
transform: translate3d(0, 0, 0);
}
<div class="container">
<div class="test1">
test
</div>
<div class="test2">
test #2
</div>
</div>
Cảm ơn, đã đánh dấu câu trả lời này là đã được chấp nhận. Điều đáng chú ý là cả hai phần tử được kết hợp phải có thuộc tính 'transform' được áp dụng. – mumu2
Hey. Bạn có thể xem [this] (https://plnkr.co/KT6raJ3rBgq8aO1y8Xlk) không? Nút bị ẩn mặc dù có giá trị z dịch lớn hơn. Cảm ơn. – user1203349
Hm. Tôi đang có một quảng trường màu đỏ lớn trong Chrome 58 và Safari 10.1. –
Câu trả lời ngắn: Không. View demo mà hoạt động như thời gian niêm
Còn câu trả lời: Nó không phải, nhưng đôi khi, chẳng hạn như khi một phần tử có một biến đổi khi anh chị em của nó không, một số trình duyệt don't handle the situation well, dẫn đến z-index bị bỏ qua.
Nói chung, tuy nhiên, điều này là do chính bản thân số transform
được áp dụng, không phải vì translateZ
. Giải pháp trong trường hợp này, để cung cấp cho tất cả các phần tử có liên quan transform: translate3d(0px, 0px, 0px)
hoặc thứ gì đó tương tự làm cho trình duyệt hiển thị các yếu tố cẩn thận hơn
- 1. Những gì cần sử dụng thay vì CONTAINS() trong CSS3
- 2. Tôi có thể sử dụng SafeHandle thay vì IntPtr không?
- 3. Tôi có nên sử dụng NoSQL thay vì MySQL không?
- 4. Sử dụng 'DbContext' thay vì 'ObjectContext' có tốt hơn không?
- 5. Html.TextBox có sử dụng Request.Params thay vì Model không?
- 6. Tôi có nên sử dụng String thay vì TFilename không?
- 7. Có thể pip sử dụng các gói hiện có thay vì tải xuống lại không?
- 8. Bạn có thể sử dụng Apache Thrift thay vì JNI không?
- 9. Eclipse có thể chấm dứt nhẹ nhàng thay vì sử dụng SIGKILL không?
- 10. Có thể sử dụng getf để so sánh thay vì eq không? (phổ biến lisp)
- 11. Có thể sử dụng char [] thay vì Strings trong Servlet để lưu trữ mật khẩu không?
- 12. Có thể sử dụng DataSourceTransactionManager cho ORM persistence thay vì HibernateTransactionManager không?
- 13. Thiết kế lớp C# - tôi có thể sử dụng gì thay vì "tóm tắt tĩnh"? không
- 14. Tôi có thể sử dụng một tiền tố khác thay vì `ng` bằng angularjs không?
- 15. có sử dụng bundler http: thay vì git :?
- 16. Sử dụng loại tĩnh thay vì biến
- 17. Sử dụng bên ngoài thay vì expand.grid
- 18. Sử dụng .DefaultIfEmpty() thay vì .FirstOrDefault() ?? String.Empty;
- 19. Sử dụng FitNesse thay vì NUnit
- 20. Sử dụng cassandra thay vì memcache?
- 21. sử dụng ExecuteReader thay vì ExecuteNonQuery
- 22. Sử dụng/dev/tcp thay vì wget
- 23. Tôi có thể chuyển đổi hình ảnh sang CSS3 không?
- 24. Tôi có thể áp dụng nhiều màu nền với CSS3?
- 25. Có lý do nào tốt KHÔNG sử dụng jQuery thay vì JavaScript cũ thuần túy không?
- 26. Thay thế xoay CSS3?
- 27. css3 thay thế cho translate3d?
- 28. Có lý do nào tốt để không sử dụng unicode thay vì chuỗi không?
- 29. Chuyển tiếp CSS3: có tùy chọn nhấp chuột không sử dụng JQuery không?
- 30. Sử dụng loại động thay vì tài sản chung không-thể
Tại sao bạn không thử nó và tìm hiểu? – cimmanon