절대적으로 위치한 div에서 목록 항목이 겹치지 않게하는 방법은 무엇입니까?

Question

div가 있고 그 div가 목록 항목입니다. 각 목록 항목은 다른 속성보다 아래에 있어야하므로 목록 속성의 기본값이됩니다. 그러나 div를 둘러싸고있는 div 은 div가 들어있는 div의 크기 조정을 방지하고 디자인이 작동하도록 절대적으로 배치해야합니다 (). 그러나 부모 div가 절대적으로 배치되면 각 목록 항목이 겹칩니다. 목록 항목을 상대적으로 배치해도 문제가 해결되지 않습니다.

HTML :

{block:Pagination} 
<div class="pagination"> 
{block:PreviousPage} 
    <a href="{PreviousPage}"><img id="pagination"  
src="http://static.tumblr.com/txc9jrr/JlWmd5ncd/previouspage.png"></a> 
    {/block:PreviousPage} 

{block:JumpPagination length="5"} 
<ol class="jumpPage"> 
      {block:JumpPage} 
      <li class="jumpPageNumber"> 
       <a class="jump_page" href="{URL}">{PageNumber}</a> 
      </li> 
      {/block:JumpPage} 
</ol> 
{/block:JumpPagination} 

{block:NextPage} 
    <a href="{NextPage}"><img id="pagination" 
src="http://static.tumblr.com/txc9jrr/9Wtmd5mxb/nextpage.png"></a> 
{/block:NextPage} 
</div> 
{/block:Pagination} 

CSS :

.pagination { 
display:inline-block; 
} 

#pagination { 
width:28px; 
height:28px; 
margin:0 0 -6px 0; 
} 

ol.jumpPage { 
position:absolute; 
} 

.jumpPageNumber { 
list-style:none; 
} 

a.jump_page { 
color:#ababab; 
background:#FF0000; 
} 

요소, 텀블러의 서버 나하지 생성 된 목록입니다.

Answer 1

제거 위치 :이 같은 절대 & 쓰기 :

CSS

#navigation > *{ 
vertical-align:top; 
} 

HTML

<ol class="jumpPage"> 
<li class="jumpPageNumber"> 
    <a href="/page/2" class="jump_page">2</a> 
</li> 
<li class="jumpPageNumber"> 
    <a href="/page/3" class="jump_page">3</a> 
</li> 
<li class="jumpPageNumber"> 
    <a href="/page/4" class="jump_page">4</a> 
</li> 
<li class="jumpPageNumber"> 
    <a href="/page/5" class="jump_page">5</a> 
</li> 
</ol>