4

Please see the following page: https://dogcollars-3.myshopify.com/products/short-sleeve-t-shirt

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:

@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.

SecretAgentMan
  • 2,856
  • 7
  • 21
  • 41
S Saurabh
  • 43
  • 3

1 Answers1

2

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

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.

pavel
  • 26,538
  • 10
  • 45
  • 61
  • ah you beat me on time ! i just found it :) +1 – Temani Afif Dec 15 '17 at 08:08
  • Panther, you are great. Many many thanks! what if i remove the following code in my theme? .page-container { -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } – S Saurabh Dec 15 '17 at 08:26
  • what exactly translate3d(0, 0, 0); do? – S Saurabh Dec 15 '17 at 08:30
  • @SSaurabh... what if you remove this code? `Position: fixed` would work, for example. You don't need this `transform` there. Read attached link for more info, or try to google - now you know what you need to find. – pavel Dec 15 '17 at 08:31
  • Thank you sir. I become fan of your! – S Saurabh Dec 15 '17 at 08:35