Прикрепить скрытое текстовое поле поверх видимого текстового поля в HTML
Я провожу некоторое тестирование безопасности веб-сайта, и я тестирую специально для исправления пользовательского интерфейса, который включает основной веб-сайт, содержащийся в iframe со скрытой формой в верхней части сайта. Идея состоит в том, что скрытое текстовое поле будет перекрывать реальное текстовое поле на веб-сайте (с целью получения этой информации третьей стороной). У меня проблемы с выравниванием скрытых объектов с объектами, которые на самом деле находятся на веб-странице. Есть ли какая-то опция привязки в HTML, или я должен вручную включать разрывы и выстраивать их?
Спасибо!
* Изменить: код ниже - непрозрачность на данный момент не имеет значения и будет изменена, как только я выстроил их правильно. На самой веб-странице есть два текстовых поля с кнопкой отправки под ними, и я хочу, чтобы мои текстовые поля (textbox1 и textbox2) и кнопка отправки соответствовали тем, которые есть на реальной веб-странице.
<div style="opacity:0.9; position:absolute; top:0; left:0; width:99%; height:99%; z-index=2">
<iframe src="http://website-url-goes-here.com" width="100%" height="100%"></iframe>
</div>
<div style="opacity:0.5; z-index=1">
<form action="test.php" method="post">
<input text=" " name="textbox1">
<BR>
<input text=" " name="textbox2">
<BR>
<input type="submit" value="submit">
</form>
</div>