How to bring iframe button front of div

Question

0.00/5 (No votes)

See more:

Hi,
I have two pages, one is main page and another one is reconnect page. I have added the reconnect page in main page using iframe. the reconnect page has a button. In the main page i placed a div on the iframe. But i need to bring the reconnect button(only) on the div.

What I have tried:

Reconnect Page:

<div>
    <p> Reconnect the page </p>
    <asp:Button ID="reconnectButton" runat="server" Text="Reconnect"/>// button needs to be get front of "overlappedDiv"
</div>

Main Page:

 <div style="height:300px;width:300px;">
     <iframe id="reconnectPageFrame"  runat="server" src="ReconnectPage.aspx" style="Height:100%;width:100%;float:left"></iframe>
     <div id="OverlappedDiv" style="height:300px;width:100%;margin-removed-300px;float:left;" />
</div>

Posted 8-Aug-16 0:55am

Member 11125335

Updated 8-Aug-16 3:16am

Add a Solution

2 solutions

Solution 1

Try setting the following on the button you want to bring to front:

CSS

style="position:absolute;z-index:10000;top:50%;left;50%"

Posted 8-Aug-16 1:01am

njammy

Comments

Member 11125335 8-Aug-16 7:49am

sorry friend. somehow its not working. its not getting front of the div, still it behind the div.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-08-08T03:16:00

You can't. The <iframe> is a single indivisible unit. You can only control the z-index of the entire <iframe>; you can't have elements from the contained document intermingled with elements from the containing document.

You'll either need to modify the ReconnectPage.aspx page so that it only contains the button you want to display, or move the button into the main page and replicate the functionality there.