Rollover popup

Question

I want to show a survey popup by clicking some links on the page, as shown below.

In the above example, a popup will be displayed by clicking on each of the 6 links.

Now I know that this can be done using the position: absolute in CSS and, accordingly, setting it for fixed layouts ...

But in my case, I have a fluid layout (everything in%), and the layout is compressed / expanded when the browser is resized. So I wanted to know how I can create a popup in such a way that even if the browser receives a resize, the positioning of the popup does not affect (relatively speaking)

Again, please remember, I cannot use fixed values ​​at all, for example top: 10px; bottom: 10px ... I can only use top: 10%; bottom: 10%

Answer 1

Wrap popups and image links in some divs. Set position: relative to the div wrapper and play with position: absolute in the popup. Thus, the top and left attributes will be shifted to the wrapper of the div, and not to the document.

JsFiddle example: http://jsfiddle.net/VirusZ/5YDLU/

Further reading: https://developer.mozilla.org/en/CSS/position