Có thể sử dụng css3 translateZ() thay vì z-index không?

Question

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?

Answer 1

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>

Answer 2

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