z-index with iframe

Posted on 2011-11-01
Last Modified: 2012-05-12
On my page I have an iframe and a popup message box. The pop up box always appears underneath the iframe even with z-index set. Is there a way to get the pop up box to appear above the iframe?

To see go to the below page and at the bottom of the page mouse over the words 'privacy policy'

thanks for any help
Question by:elliottbenzle
    LVL 17

    Expert Comment

    Have you tried with this

    <div class="tooltip" style="position: absolute; left: 814px; top: 454px; display: none; z-index:1000">All personal information provided to CMR is kept strictly confidential and is not sold or exchanged with any other entity.</div>
    LVL 4

    Author Comment

    Yes, I tried adding a z-index to both the iframe and the .tooltip div

    Ne effect though.
    LVL 53

    Accepted Solution

    If the iframe is not positioned it will not respond to z-index.  So position:relative or position:absolute my do it, however from the look of the code, I doubt that page validates, and there will probably be cross browser issues with it.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Photoshop CC 2015

    Photoshop has become the standard in image manipulation among professional photographers and graphic designers. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now