位置：由於透視屬性，固定在Chrome＆Firebox中不起作用

Question

我正試圖在獨立於用戶滾動位置的窗口中固定一個div對象。

我認爲與

position: fixed 

屬性來完成，但在Chrome和Firefox這似乎並不在我的情況下工作，而在Safari它呢？ 我的問題追查到

perspective: 1500px 

屬性，我給父div的之一。我在下面創建了一個簡化的剪輯，它演示了這個問題。

如果您轉到css並從navbar_wrapper中刪除透視屬性，則紅框確實保持固定。請注意，在Safari瀏覽器中它始終都能正常工作，而Chrome & Firefox只有在刪除透視圖元素後才能使用。任何想法發生了什麼？

#navbar_wrapper { 
 
    display: flex; 
 
    align-items: stretch; 
 
    perspective: 1500px; 
 
    position: relative; 
 
    left: 0; 
 
    z-index: 2; 
 
    padding: 50px 0 0 0; 
 
    min-height: 100%; 
 
} 
 

 
#basket { 
 
    position: fixed; 
 
    max-width: 20%; 
 
    left: 80%; 
 
    top: 60px; 
 
}

<div id="navbar_wrapper"> 
 

 
    <div id="product_basket"> 
 
    <div id="basket" style="background:red"> 
 
     stsdjhgfjhgadf 
 
    </div> 
 
    </div> 
 

 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
</div>

Answer 1

As explained in this post，

perspective建立方式類似於position: relative做了包含塊。

因此，您的固定div相對於#navbar_wrapper得到固定，而不是相對於窗口。

的解決方案是移出#product_basket#navbar_wrapper，像這樣：

#navbar_wrapper { 
 
    display: flex; 
 
    align-items: stretch; 
 
    perspective: 1500px; 
 
    position: relative; 
 
    left: 0; 
 
    z-index: 2; 
 
    padding: 50px 0 0 0; 
 
    min-height: 100%; 
 
} 
 

 
#product_basket { 
 
    position: fixed; 
 
    max-width: 20%; 
 
    left: 80%; 
 
    top: 60px; 
 
}

<div id="product_basket"> 
 
    <div id="basket" style="background:red"> 
 
    stsdjhgfjhgadf 
 
    </div> 
 
</div> 
 
<div id="navbar_wrapper"> 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
    content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 
</div>