滚动固定元素的内容没有发生

Question

请参阅以下页面： https://dogcollars-3.myshopify.com/products/short-sleeve-t-shirt

我正在尝试修复“订单详细信息”框的位置，使其保持在显眼位置并且其后面的内容滚动。这是 Shopify 预建主题。我应用了以下附加 CSS：

@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;  
  } 
}

“订单详情”元素定位正确但不固定。该元素会随着该层后面的内容滚动。

Answer 1

问题在于元素 .page-container 上的 transform: translate3d 样式。

评论这些样式问题就消失了，“其他细节”元素将得到修复。您可以尝试在下面的小提琴中评论/取消评论。

https://jsfiddle.net/nLbntzqk/

---

编辑：
现在我找到了更多信息，请参阅 'transform3d' not working with position: fixed children 了解更多详细说明。