How to place an iframe over another iframe of same width and height using HTML

I am trying to run the following code so that whenever I click on a link, the respective page gets displayed in the iframe. I am trying to overlay iframes, but the code doesn't seem to work as expected.

<iframe name="IFrame1" style="width: 200px; height: 200px;   display: block;position: relative;" src="https://www.link1.com"></iframe>

<iframe name="IFrame2" style="width: 200px; height: 200px; top: 10px;left: 10px;display:block;position: absolute;" src="http://www.link2.com"></iframe>


<p><a href="https://www.link1.com" target="IFrame1">link1</a></p>
<p><a href="http://www.link2.com" target="IFrame2">link2</a></p>

Kindly help me get over it.

Solution

You can use single iframe only.

<iframe name="IFrame1" style="width: 200px; height: 200px;   display: block; 
position: relative;" src="https://www.link1.com">
</iframe>


<p><a href="https://www.link1.com" target="IFrame1">link1</a></p>
<p><a href="http://example.com/" target="IFrame1">link2</a></p>