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

【问题标题】：mistake in @media css code. should be simple@media css 代码中的错误。应该很简单
【发布时间】：2014-02-26 11:06:16
【问题描述】：

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

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

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

【问题讨论】：

那里的代码没有问题。但是如果你使用 top 元素需要是 position:absolute
我不能将元素设置为绝对，因为它会与页面的其余部分样式混淆。还有其他值我可以用 'top' 代替吗？

标签： css mobile width

【解决方案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%;
    }
}

【讨论】：

感谢您的快速回复！与页面其余部分一起使用的唯一值是“固定”，但@media 代码仍然不会触发。（www.focallocal.org - 屏幕左侧的标签）