CSS "제안 검색 상자"위치가 맞지 않음

Question

사이트에 대한 검색 기능을 만들었으며 입력하는 내용에 따라 드롭 다운하는 "제안 상자"를 만들었습니다. (Google처럼!)

내 문제는 상자가 창 크기에 따라 위치가 벗어난다는 것입니다. 검색 필드의 하단에 어떻게 수정합니까?

라이브 예는 여기에서 찾을 : http://swissinstruments.com/searchresults.php는 (상단 검색 필드, 타입 "A"또는 "c"몇 가지 제안이 내려오고 얻기를 참조

을 지금 사용하고 무엇의 일부 코드 :.

제안 상자 STYLE

.suggestion_list 
{ 
z-index:500; 
background: white; 
border: 1px solid #80B6E1; 
padding: 4px; 
float:none; 
margin-top:5px; 
width:191px; 
position:fixed; 
} 

.suggestion_list ul 
{ 
padding: 0; 
margin: 0; 
list-style-type: none; 
} 

.suggestion_list a 
{ 
text-decoration: none; 
color: navy; 
} 

.suggestion_list .selected 
{ 
background: navy; 
color: white; 
} 

.suggestion_list .selected a 
{ 
color: white; 
} 

#autosuggest 
{ 
display: none; 
} 

The SEARCH BOX Style 
#search-form { float:right; padding:9px 0 0 0;} 
#search-form fieldset { 
border:none; 
border:1px solid #0f58a2; 
border-top:none; 
background:#126dbe; 
padding:0 12px 10px 13px; 
float:right 
} 
#search-form input.text { width:190px; border:1px solid #d0e0e6; margin-right:3px;  padding:2px 2px 3px 7px;} 
#search-form input.submit { background:#007cff; width:59px; text-align:center;  height:23px; line-height:23px; color:#fff; font-size:.77em; text-transform:uppercase; border:none; cursor:pointer;} 

마지막으로 사업부를 배치하는 데 사용되는 자바 스크립트 부분은. 내가 축소로 즉시 대부분의 사용자가 사용하는 해상도 작동하는 것 같다부터 -164의 X를 설정합니다. 그러나거나 상자를 펼치면 상자가 제 위치에 없습니다.

/******************************************************** 
Position the dropdown div below the input text field. 
********************************************************/ 
this.positionDiv = function() 
{ 
    var el = this.elem; 
    var x = -164; 
    var y = el.offsetHeight; 

    //Walk up the DOM and add up all of the offset positions. 
    while (el.offsetParent && el.tagName.toUpperCase() != 'BODY') 
    { 
     x += el.offsetLeft; 
     y += el.offsetTop; 
     el = el.offsetParent; 
    } 

    x += el.offsetLeft; 
    y += el.offsetTop; 

    this.div.style.left = x + 'px'; 
    this.div.style.top = y + 'px'; 
}; 

px가 아닌 백분율을 사용하는 방법이 있습니까?

Answer 1

CSS에서 중첩 된 div 및 상대/절대 위치 지정을 사용하면이 작업을 수행 할 수 있습니다. 드롭 다운의 위치를 ​​지정하는 데 자바 스크립트가 실제로 필요하지 않습니다.

이런 일이 플러시해야는, 검색 양식을 가정하면도 항상 JQuery와 UI 자동 완성 위젯을 사용할 수

#suggest_container { position:relative; overflow:visible; } 
#autosuggest { position:absolute; top:<height-of-search-form>; left:0px; } 

<div id="suggest_container"> 
    <form id="search-form"></form> 
    <div id="autosuggest"></div> 
</div> 

패딩/마진이 없다, 나는 꽤 전에 사용했는데 그것은 매우 강력한입니다