滚动弹出流体布局

Question

我想在点击页面上的一些图片链接时显示翻转弹出窗口，如下所示..

在上述情况下，点击6个链接中的每一个都会显示弹出窗口。

现在我知道这可以通过在CSS中使用position：absolute并相应地将其设置为固定布局来完成...

但在我的情况下，我有一个流畅的布局（全部以％表示），并且随着浏览器的大小调整，布局缩小/扩展。所以我想知道如何以这样的方式创建弹出窗口即使浏览器调整大小，弹出窗口的定位不会受到影响（相对而言）

再次请记住，我不能像顶部一样使用固定值：10px;底部：10px ......我只能使用top：10％; bottom：10％

Answer 1

在一些div中包装弹出窗口和图片链接。将position: relative设置为包装器div并在弹出元素上使用position: absolute。这样，top和left属性将偏移到包装器div，而不是文档。

JsFiddle示例： http://jsfiddle.net/VirusZ/5YDLU/

进一步阅读：https://developer.mozilla.org/en/CSS/position