플로팅 Div 콘텐츠 위에

Question

저는 CSS 전문가가 아닙니다. 레이아웃을 이해할 때마다 뭔가 혼란 스럽습니다. 현재 다음 HTML을 가지고 있습니다 :

<div> 
    <input id="searchQuery" type="text" placeholder="Search..." /> 
    <br/> 

    <div id="searchSuggestions"> 
    <!-- search suggestions will be dynamically populated --> 
    </div> 
</div> 

<div id="content"> 
    <!-- Rest of site content goes here --> 
</div> 

사용자가 검색 필드에 내용을 입력 할 때 검색 제안을 제공하고 있습니다. 나는이 일을하고있다. 내 문제는 제안이 나타나거나 사라지면 내용을 위아래로 푸시한다는 것입니다. 나는 그 내용이 그 자리에 머물길 원한다. 검색 제안이 searchQuery 필드 아래에 나타나지만 콘텐츠 상단의 레이어처럼 보입니다. 어떤 CSS 속성을 사용해야합니까?

너!

Answer 1

검색 상위 div를 {position : relative}로, 검색 결과 child div를 {position : absolute}로 지정합니다. 절대 위치에있는 검색 결과는 규칙적인 흐름에서 벗어나 상대적으로 배치 된 첫 번째 상위 div의 왼쪽 상단에 배치됩니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/position