台式机和移动设备之间的标头位置不同

Question

我正在为在其WP网站中运行Avada的客户端制作自定义CSS。
他希望标题位于台式机的底部，但位于移动设备的顶部。

我已使用以下命令将标头正确放置在桌面上

：

.fusion-header-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 76px;
}

是否可以仅使用CSS将其放在移动设备的顶部？ 如果有帮助，我可以通过检阅元素看到标头上有一个z-index: 5。

Answer 1

由于您的代码在台式机上工作，因此可以使用CSS媒体查询执行相同的操作，但具有“ top”属性，或具有“ Static”移动属性：

@media(max-width: 767px) {
   .fusion-header-wrapper {
      position: static;
      /* static is the default property */
   }
   /* OR */
   .fusion-header-wrapper {
      top: 0;
   }
}

Answer 2

您可以对同一媒体使用

@media only screen and (min-width: 700px){ top:0}