响应式 HOVER DIV 的 CSS 问题

Posted 2023-05-08

【中文标题】响应式 HOVER DIV 的 CSS 问题

【英文标题】：CSS issue with Responsive HOVER DIV

【发布时间】：2021-04-08 15:22:56

【问题描述】：

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

看到出现在全屏版网站左上角的绿色“信息”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 中设置什么值，因为每个移动设备都有不同的高度。

我该如何解决这个问题？

【参考方案1】：

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

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

  #productHoverDIV 
      top: auto;
      bottom: 40px; 

      width: 100%;

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