Как разместить iframe поверх другого iframe такой же ширины и высоты, используя HTML

Question

Я пытаюсь запустить следующий код, чтобы каждый раз, когда я нажимал на ссылку, соответствующая страница отображалась в iframe. Я пытаюсь наложить iframes, но код не работает должным образом.

<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>

Пожалуйста, помогите мне преодолеть это.

Answer 1

Вы можете использовать один iframe только.

<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>

Answer 2

iframe {
  width:200px;
  height:200px;
  position:absolute;
  border:solid 1px #000;
}


#front {
  position:absolute;
  border:solid 1px #000;
  width:100px;
  height:100px;
  left:120px;
  top:120px;
  background:#f00;
  box-shadow:0 0 10px #666;
  
}

<iframe src="https://www.link1.com"></iframe>
<div id="front">
<iframe src="https://www.link1.com"></iframe></div>

В общем, не должно быть проблем с размещением DIV поверх iFrame.