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

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

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

我可以处理css3动画来创建闪电，但问题是绝对定位将保存图像/动画的div来创建效果。我需要把潜水艇安置在风暴云区域的正上方。非常简单：将div定位在右侧：0；底部：40px一旦缩小浏览器，显然背景图像大小会改变，然后绝对定位的div现在不在正确的区域

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

我读了一些关于Css区域的文章，但它们仍然是实验性的，而且我不确定它是否适合我的情况

有什么想法吗

编辑：很抱歉让人困惑。我实际上是想让潜水艇只停在风暴云区域的顶部。我只添加了关于以特定宽度显示这些div的部分，只是为了让您知道，我并不是在尝试非常小的布局

实际上，您可以直接在CSS中使用媒体查询，例如隐藏div。很多解释

但一个例子是：

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

---

如果您不希望屏幕分辨率低于1024px时出现闪电，可以使用CSS媒体查询将其删除

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

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

---

在此处了解有关媒体查询的更多信息：

对不起，我的问题似乎是问如何隐藏较小宽度的媒体查询，但不是这样。谢谢你的回复！实际上，我是在问当你缩小浏览器时，如何将div保持在屏幕的某个区域。谢谢你的回复！