Ролловер Popup в макете жидкости

Question

Я хочу показать всплывающее окно при нажатии некоторых ссылок на изображения на странице, как показано ниже.

В приведенном выше случае при нажатии каждой из 6 ссылок будет отображаться всплывающее окно.

Теперь я знаю, что это можно сделать, используя position: absolute в CSS и, соответственно, установив его для фиксированных макетов ...

Но в моем случае у меня изменчивый макет (все в%), и макет сжимается / расширяется при изменении размера браузера. Итак, я хотел знать, как я могу создать всплывающее окно таким образом, что даже если размер браузера изменяется, положение всплывающего окна не изменяется (условно говоря)

Опять же, пожалуйста, помните, я не могу использовать фиксированные значения, например, top: 10px, bottom: 10px ... Я могу использовать только top: 10%, bottom: 10%

Answer 1

Оберните всплывающие окна и ссылки на изображения в некоторых элементах div. Установите position: relative на div оболочки и поиграйте с position: absolute на всплывающем элементе. Таким образом, верхний и левый атрибуты будут смещены на div обертки, а не на документ.

Пример JsFiddle: http://jsfiddle.net/VirusZ/5YDLU/

Дальнейшее чтение: https://developer.mozilla.org/en/CSS/position