드롭 다운 메뉴, 절대 및 상대

Question

Im learning CSS, 그래서 드롭 다운 메뉴를 만들기 시작했고 질문이 있습니다. 부모가 하위 메뉴가 드롭 다운하기 위해서는 상대해야하면서 왜 하위 메뉴에서 각 li 절대 위치해야합니다 :

<nav> 
    <ul> 
    <li>style 1 
     <ul class="sub-menu menu-1"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li>  
     </ul> 
    </li> 
    <li>style 2 
     <ul class="sub-menu menu-2"> 
     <li>uno</li> 
     <li>dos</li> 
     <li>tres</li> 
     </ul> 
    </li> 
    <li>style 3 </li> 
    <li>style 4 </li> 
    </ul> 
</nav> 

내 질문은 : 여기 내 탐색의 구조는? 나는 다음과 같은 얻을 무시하면 이 (가 탐색의 전체 영역뿐 아니라 하위 메뉴 아래로 떨어진다) :

을하지만 상대의 위치를 ​​하위 메뉴의 부모를 설정하고, 절대적으로 하위 메뉴의 위치를 ​​설정하면, 그것은 작동합니다 :

저는 왜 이런 일이 일어나는지, 절대 위치와 상대 위치가 어떻게 작동하는지 이해하고 싶습니다. 감사!

Answer 1

절대 요소는 가장 가까운 위치에있는 부모/조상에 상대적으로 배치됩니다. 절대 위치에있는 요소에 상위 요소가 없으면 문서 본문을 참조로 사용합니다.