响应式设计中绝对定位的元素

Question

我不确定这是可能的，但我想我会看到有人对它有所了解。 我的网站有一个大的全屏图像作为主要背景。

屏幕最右侧的部分图像是一些暴风云。我想在暴风云区域添加雷击动画。

我可以处理css3动画来创建闪电，但问题是绝对定位将保存图像/动画以创建效果的div。我需要将div放置在风暴云区域上方。 （很容易：将div定位在“right：0; bottom：40px”）一旦缩小浏览器，显然背景图像大小会改变，然后绝对定位的div现在不在正确的区域他们应该是。

Javascript有什么方法可以做到这一点吗？

我正在阅读有关Css地区的一些内容，但它们仍然是非常实验性的，而且我不确定它是否适用于我的情况。

有什么想法吗？

编辑：抱歉让人困惑。我实际上只是要求将div保持在风暴云区之上。我只添加了关于以特定宽度显示这些div的部分，只是为了让您知道我没有尝试这种非常小的布局。

Answer 1

实际上你可以直接在CSS中使用media queries来隐藏你的div。很多解释here

但是一个例子是：

<style>
 @media (max-width: 1024px) {
   .your-stuff {
     display: none;
   }
 }
</style>

Answer 2

如果您在屏幕小于1024px分辨率时不想要闪电，则可以使用CSS媒体查询将其删除。

将其粘贴到您的CSS文件中，并将.lightning类更新为您的选择器。

@media all and (max-width: 1024px) {
  .lightning { display: none; }
}

点击此处了解有关媒体查询的详情：http://css-tricks.com/css-media-queries/