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

Question

我不确定这是否可行，但我想我会看看是否有人对此有想法。 我有一个以全屏大图片作为主要背景的网站。

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

我可以处理 css3 动画来创建闪电，但问题绝对是定位将保存图像/动画以创建效果的 div。我需要将 div(s) 定位在 Storm 云区域的正上方。 (很简单:将 div 定位在“right:0;bottom:40px”)一旦你缩小浏览器，背景图像的大小就会明显改变，然后绝对定位的 div(s) 现在不在正确的区域他们应该是。

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

我正在阅读一些关于 Css 区域的文章，但它们仍处于试验阶段，而且我不确定它是否适合我的情况。

有什么想法吗？

编辑:抱歉打扰了。我实际上是在询问如何让 div 仅位于暴风云区域之上。我只是添加了关于以特定宽度显示这些 div 的部分，只是为了让您知道我不是在非常小的布局中尝试这样做。

Answer 1

实际上，您可以直接在 CSS 中使用 media queries 来隐藏您的 div。多多解说here

但是一个例子是:

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