响应式 HOVER DIV 的 CSS 问题

Question

我正在构建的响应式网站的移动版本有问题。

看到出现在全屏版网站左上角的绿色“信息”DIV 了吗？ 我需要它向下移动并位于移动版网站上的屏幕底部 - 位于包含所有链接的页脚 DIV 的正上方。

这是全屏版本：

这是移动版：

这是我用于常规全屏布局的 CSS：

#productHoverDIV {
   z-index: 20;

   position: absolute;
   top: 10px;
   left: 10px;

   width: 300px;

   padding: 8px;
}

这是移动规则：

 @media screen and (max-width: 414px) {

  #productHoverDIV {
      z-index: 20;

      position: absolute;
      bottom: 40px; // that's the height of the FOOTER DIV below it

      width: 100%;

      padding-top: 0px;
      padding-bottom: 0px;
  }
}

问题在于，即使我在移动布局上将productHoverDIV 与bottom 中的40px 相匹配，它仍然保留了常规CSS 规则中的top:10px 值，并最终覆盖几乎整个屏幕。
所以我需要以某种方式取消 top 规则 - 或者用不同的值覆盖它，除了 我不知道应该从top 中设置什么值，因为每个移动设备都有不同的高度。

我该如何解决这个问题？

Answer 1

您应该将其改回其默认值，即自动。 删除了重复的 z-index 和位置值。

 @media screen and (max-width: 414px) {

  #productHoverDIV {
      top: auto;
      bottom: 40px; 

      width: 100%;

      padding-top: 0px;
      padding-bottom: 0px;
  }
}