在固定元素后面滚动内容不会发生

Dear Stack Oveflowers,

亲爱的堆栈Oveflowers,

Please see the following page:

请参阅以下网页:

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

https://dogcollars - 3. - myshopify.com/products/short袖t -衬衫

I am trying to fix the position of the "order details" box so it stay at prominent position and content behind it scroll. This is a Shopify prebuilt theme. I have applied the following additional CSS:

我正在修改“订单详细信息”框的位置，使它保持在显著的位置和内容在它的滚动。这是一个预先设计好的主题。我已经应用了以下附加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;  
  } 
}

The 'order details' element is positioned correctly but not fixed. This element scrolls along with the content behind this layer.

“订单细节”元素定位正确，但不是固定的。这个元素与层后面的内容一起滚动。

Please somebody help me today.

今天有人帮我。

Thanks in advance!

提前谢谢!

1 个解决方案

#1

Problem is with transform: translate3d styles on element .page-container.

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

Commenting these styles the problem goes away, 'Others detail' element would be fixed. You can try to comment/uncommend in the fiddle below.

注释这些样式，问题就消失了，“其他细节”元素将被修正。你可以试着在下面的小提琴中评论/不推荐。

https://jsfiddle.net/nLbntzqk/

EDIT:
Now I've found more info, see 'transform3d' not working with position: fixed children for more detail explanation.

编辑:现在我找到了更多的信息，请参阅“transform3d”(不与position: fixed children)来了解更多细节。

#1