| SitePoint Sponsor |
i'm using javascript to show popup divs for certain features of my site.. currently I have them placed outside and under the site "wrapper". Though positioned absolutely, depending on the size of the wrapper, the popup divs height will be affected.
So my question is.. where should i place these popup divs in order for them to be positioned consistently? If i place them above the wrapper they will be covered by the contents of the wrapper.
anyone know what i'm missing?
thanks a lot!
Hi,
We'd need to see your code to give appropriate advice.
If by under your wrapper you mean they are hidden by the wrapper laying on top of the pop up this can be fixed by a correct use of z-index.
Apply a z-index to the wrapper that is less than that of the pop up. (you will need to add position:relative to the wrapper if it is not positioned in order to gain a stacking context for z-index to take effect.)
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
paul, z-index works perfectly. Thank you so much!
but i was wondering if this is the correct way to go about this technique. Is the way i'm handling simple popups divs a correct way of doing it? or is there better?
Thanks again!
sorry, i thought i included the code. The structure is as follows..
Code HTML4Strict:<body> <div class="popup">popup1</div> <div class="popup">ICANHASPOPUP</div> <div id="wrapper"> <div id="content"> stuff! </div> </div> </body>
Hi,
It depends on what type of pop ups they are and what they are doing. If they are the type that pop up when clicked then you will need javascript for that.
If you want them to just pop up when hovered then you can do some things with css only.
See my article here for some ideas of css pop ups.
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Posting Permissions
Bookmarks