css - @media CSS 代码中的错误。应该很简单

Question

我正在尝试使用@media 命令将我网站的一个元素设置为不同的移动浏览高度，但我似乎无法让代码正常工作。如果这里有人能看到我哪里出错了并指出正确的方向，我将不胜感激。

body .gilidPanel-opener {
   top: 55%;
}

@media all and (max-width: 700px){
body .gilidPanel-opener {
      top: 85%;
    }
}

Answer 1

由于 position 属性值默认为 static，您需要提供不同的值，例如 absolute、fixed 或 relative 使您的 top 属性有效，所以请尝试:

body .gilidPanel-opener {
   position: relative; /* or absolute or fixed */
   top: 55%;
}

@media all and (max-width: 700px){
body .gilidPanel-opener {
      position: relative; /* or absolute or fixed */
      top: 85%;
    }
}