텍스트 위로 마우스를 올리면 iframe 표시

Question

특정 텍스트 영역 위로 마우스를 가져 가면 "추가 정보"스타일 iframe을 추가하려고합니다. 내 기본 설정에서 몇 가지 자바 스크립트와 CSS 및 두 divs의 도움으로.

는

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

제가하는 데 문제는 내 자바 스크립트 내 마우스는 다음 주위에 내 모든 텍스트를 범프 iframe이 함께 새로운 사업부를 배치한다는 것입니다. 정말 내가해야 할 일은 iframe을 보여 주지만 주위의 요소를 엉망으로 만드는 것이 아닙니다. 현재 앵커 위로 마우스를 올리면 모든 lorem ipsum이 iframe이있는 div의 길이만큼 아래로 부딪칩니다. 누군가 내 뜻을 정확하게보고 싶다면 내 웹 사이트에서 실제 사례를 제공 할 수 있습니다.

Answer 1

이 시도 :

#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; 
} 

Answer 2

이 솔루션은 확인했다 그 (그래서하지 일반적으로 서식 엉망 않음) 다음을 설정 페이지의 맨 아래에 배치됩니다 공중 선회 될 사업부 상대적 위치에서 절대 위치로 divs합니다. 이것은 javascript가 적절한 xindex와 함께 그것을 설정할 수있게합니다.