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

Question

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

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

我可以处理css3动画来创建闪电，但问题是绝对定位将保存图像/动画创建效果的div。我需要将div（s）放置在暴风云区域的正上方。 （很容易：将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

如果你不想闪电时，屏幕是小于1,024像素的分辨率，你可以使用CSS媒体查询中删除。

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

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

了解更多有关媒体查询的位置：http://css-tricks.com/css-media-queries/