위치 상대 div를

Question

나는 항상이 같은 코드를 참조하십시오

#container { 
    background:#000000 none repeat scroll 0 0; 
    display:block; 
    overflow:hidden; 
    position:relative; 
    width:100%; 
} 

나는 상대적인 위치가 우측 상단과 하단 (PX)를 왼쪽 CSS의 예절을 사용하여 상대적으로 부모 요소에 사업부를 수용하기 위해 사용된다 생각했다. 아래 예와 같이 혼자서 사용하는 것은 무엇입니까? 위치 속성에 의해 영향을받는 다른 속성은 무엇입니까?

Answer 1

자식 요소 위치이 영향을받을 수 있습니다.

부모 요소 위치를 relative로 설정 한 후 자식 요소 위치를 절대 값으로 설정하려고하면 문서가 아닌 부모에만 절대적으로 배치됩니다.

먼저 예를

<style> 
    #container 
    { 
     background:red none repeat scroll 0 0; 
     display:block; 
     position:relative; 
     top: 100px; 
     left: 100px; 
     width:100%; 
    } 
    #child 
    { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 

</style> 
<div id="container"> 
    <div id="child"> 
     I am absolutely placed relative to the container and not to the document 
    </div> 
</div> 

두 번째 예

<style> 
    #container 
    { 
     background:red none repeat scroll 0 0; 
     display:block; 
     top: 100px; 
     left: 100px; 
     width:100%; 
    } 
    #child 
    { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 

</style> 
<div id="container"> 
    <div id="child"> 
     I am absolutely placed relative to the container and not to the document 
    </div> 
</div> 

봅니다 위의 두 사례를 확인하고 그 차이를 볼 수 있습니다.

Answer 2

이렇게하면 body 요소와 관련되어 있으므로 body의 전체 너비에 상대적으로 "width : 100 %"를 적용합니다.