スクロール固定要素をbehingコンテンツが

Question

親愛なるスタックOveflowersが起きていない、

以下のページを参照してください：私は「注文の詳細」ボックスの位置を固定しようとしています

https://dogcollars-3.myshopify.com/products/short-sleeve-t-shirt

をそれは目立つ位置に留まり、その背後にあるコンテンツはスクロールします。これはShopify prebuiltテーマです。

@media only screen and (min-width: 1000px) { 

    .product-single { 
    width: 70%; 
    height: auto; 
    position: relative; 
    } 

    .order-details { 
    width: 300px; 
    height: auto; 
    padding: 10px; 
    top: 50px; 
    left: 70%; 
    background: rgba(255,255,0,0.2); 
    position: fixed; 
    } 
} 

が「注文の詳細」要素が正しくなく

を固定配置されている：私は、次の追加のCSSを適用しています。この要素は、このレイヤーの背後にあるコンテンツと共にスクロールします。

誰か助けてください。

ありがとうございます！

Answer 1

問題はtransform: translate3dという要素のスタイルは.page-containerです。

これらのスタイルにコメントすると、問題がなくなり、「その他の詳細」要素が修正されます。あなたは下のフィドルでコメント/コメントをしようとすることができます。

https://jsfiddle.net/nLbntzqk/

---

EDIT：
今、私が見つけた詳細は、より詳細な説明については'transform3d' not working with position: fixed childrenを参照してください。