Layer_cart messed up positioning

[CrossY]

Hi,
 
The #layer_cart (pop-up after adding items to cart) is messing up positioning on my website, because of two different parts of code.
 
The first is for large screens. I have a fixed header and it doesn't like that, i've solved that by positioning #layer_cart like this:
 

@media (min-width: 768px) {
#layer_cart { 
position: fixed; 
left: 0px; 
top: 200px ! important; }
}

However, for my mobile view I have used the following code to force a proper fullscreen background:

@media (max-width: 768px) {
  div#page { background: #000 !important; }
  html { 
  background: url("/img/cms/bg-mobile3.jpg") no-repeat scroll center center / cover; 
  height: 100%; 
  overflow: hidden;}
  body { 
height: 100%; 
overflow: auto; 
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% ! important; }
}

In this case the ^{body { overflow:auto; }} messes up the #layer_cart as well. Forcing it to stick at ^top:0px; , so it's at the top of the page (not viewport) regardless if the person is scrolled down on their device.
 
Any ideas how to find a work-around for this? Would be very much appreciated!
 
Best,

Edited April 18, 2016 by CrossY (see edit history)