Tôi có một tình huống trong đó, trong các trường hợp CSS bình thường, một div cố định sẽ được định vị chính xác nơi nó được chỉ định ( top:0px, left:0px).
Điều này dường như không được tôn trọng nếu tôi có cha mẹ có biến đổi transl3d. Tôi không nhìn thấy cái gì à? Tôi đã thử các tùy chọn chuyển đổi webkit khác như kiểu và biến đổi nguồn gốc nhưng không gặp may.
Tôi đã đính kèm một JSFiddle với một ví dụ mà tôi mong muốn hộp màu vàng nằm ở góc trên cùng của trang chứ không phải bên trong phần tử container.
Bạn có thể tìm thấy bên dưới một phiên bản đơn giản của fiddle:
#outer {
position:relative;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 300px;
border: 1px solid #5511FF;
padding: 10px;
background: rgba(100,180,250, .8);
width: 80%;
}
#middle{
position:relative;
border: 1px dotted #445511;
height: 300px;
padding: 5px;
background: rgba(250,10,255, .6);
}
#inner {
position: fixed;
top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px;
left: 0px;
background: rgba(200,180,80, .8);
margin: 5px;
padding: 5px;
}<div id="container">
Blue: Outer, <br>
Purple: Middle<br>
Yellow: Inner<br>
<div id="outer">
<div id="middle">
<div id="inner">
Inner block
</div>
</div>
</div>
</div>Làm cách nào tôi có thể làm cho transl3d hoạt động với trẻ em có vị trí cố định?
Vấn đề tương tự cũng xảy ra với bộ lọc: stackoverflow.com/q/52937708/8620333
—
Temani Afif