Javascript 将iframe悬停在文本上显示

当您将鼠标悬停在文本的特定区域上时，我试图添加一个“附加信息”样式的iframe。借助一些javascript和css以及我的基本设置中的两个div

<a 
   onmouseover="ShowContent('uniquename3'); return true;"
   onmouseout="HideContent('uniquename3'); return true;"
   href="javascript:ShowContent('uniquename3')">
Tournament 22:00-23:00
</a>
<div 
   id="uniquename3" 
   style="display:none; position:relative; left:0px; top:10px; border-style: none; background-color: gray; padding: 5px;overflow:none;width:212px;z-index:5;">
 <iframe src="Test2.html" width="212px" height="340px" border="0" scrollbar="no" frameborder="0"></iframe>
</div>
<div id="other" style="z-index:1;">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque     laudantium,     totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae     dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,     sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam     est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius     modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima     veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea     commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil     molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</div>

对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？“你是否有权利在一个自由的环境中为他人辩护？你是否有权利在一个自由的环境中为他人辩护？”

我遇到的问题是，我的javascript将新div与我的鼠标所在的iframe放在一起，然后将我的所有文本四处颠簸。我真正需要做的是让iframe显示出来，但不要弄乱它周围的元素。当前，当你将鼠标悬停在锚上时，它会将所有lorem ipsum向下颠簸到div wi的长度如果有人想确切了解我的意思，我可以在我的网站上提供一个工作示例。

试试这个：

#uniquename3{
  display:none;
  position:relative;
  left:0px;
  top:10px;
  border-style: none;
  background-color: gray;
  padding: 5px;
  overflow:none;
  width:212px;
  z-index:5;
}
#uniquename3 iframe{
  display:none;
  position:absolute;
  left:0px; /* pos as needed */
  top:0px;
}

---

解决方案是确保将要悬停的div放在页面底部（这样它通常不会弄乱格式）然后将divs位置从相对设置为绝对。这允许javascript设置它，并使用适当的xindex显示在顶部。

我的方法是使用CSS属性

position:fixed；

并将iframe的x和y坐标设置为文本底层区域的坐标。@NullPointer链接显然无效