Question

我正在使用HTML5 / CSS3 / Jquery和媒体查询创建响应式网站。

我有一个充满图像（图库）的页面，它位于一个16列的网格中，所以它很适合平板电脑/手机等。

我还有一个位于网格外的绝对的div，其目的是在光标悬停在其中一个图像上时显示文本/信息（每个图像都有它自己的信息）。

问题：

 _ _ _ _ _ _ _ _ _ _ _ _         _ _ _ _ _ _ _ _ _ _
| _ _ _    _ _ _ _ _    |       | _  _ _ _ _ _      |
||info |  | 16 col  |   |       ||in|16 col   |     |
||     |  |  grid   |   |   =>  ||  | grid    |     |
||_ _ _|  | gallery |   |   =>  ||_ |gallery  |     |
|         |         |   |       |   |         |     |
|         |_ _ _ _ _|   |       |   |_ _ _ _ _|     |
|_ _ _ _ _ _ _ _ _ _ _ _|       |_ _ _ _ _ _ _ _ _ _|

当我调整浏览器窗口的大小时，图库（主要内容/网格）会移入并覆盖“info”div。

我已经尝试将信息div relative 定位，这在某种程度上起作用，但最终在缩放时将对齐的16 col容器在下面对齐页面下来 - 不是我追求的。

问题：

有没有办法让两个元素并排放置，并且两者始终在页面上可见，至少达到平板电脑的媒体查询（~959px宽）启动的程度？（然后我可以删除它）

非常感谢任何评论/反馈/建议。谢谢。

Answer 1

As i see the example this could be one of the reason 

1. if you are making the info div as relative then add the z-index property to it.
2. if you are making the info div as Absolute then provide the position property as left/top etc.

将Div定位在响应网格之外

1 个答案: