Question

亲爱的Stack Oveflowers，

请参阅以下页面：

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

我正在努力确定＆＃34;订单详情的位置＆＃34;框所以它保持在显眼的位置和背后的内容滚动。这是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;  
  } 
}

＆＃39;订单详情＆＃39;元素定位正确但不固定。此元素与此图层后面的内容一起滚动。

今天请有人帮助我。

提前致谢！

Answer 1

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

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

https://jsfiddle.net/nLbntzqk/

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

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

1 个答案: