响应式 HOVER DIV 的 CSS 问题

如何解决响应式 HOVER DIV 的 CSS 问题

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

看到出现在网站全屏版左上角的绿色“信息”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 是 40px 来自 bottom，它仍然保持它的 top:10px 值来自常规 CSS 规则，最终几乎覆盖整个屏幕。
所以我需要以某种方式取消 top 规则 - 或者用不同的值覆盖它，除了 我不知道从 top 中放置什么值，因为每个移动设备都有不同的高度。

我该如何解决这个问题？

解决方法

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

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

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

      width: 100%;

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