在html中锚定隐藏文本框ontop的可见文本框

Question

我正在对一个网站进行一些安全性测试，我正在专门针对用户界面纠正进行测试，这涉及到包含在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>