포지셔닝 관련 CSS - position

포지셔닝 관련 CSS - position

• position 속성은 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성으로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하게 사용하는 속성 중 하나입니다.
• 기본형 : position : static / relative / absolute / fixed
• position 속성을 이용하면 텍스트나 이미지를 나란히 배치할 수 있고 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수도 있습니다.

속성 값	설명
static	요소를 문서의 흐름에 맞추어 배치합니다.(기본 값)
relative	이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다.
absolute	원하는 위치를 지정해 배치합니다.
fixed	지정한 위치에 고정해 배치합니다.. 화면에서 요소가 잘릴 수도 있습니다.

• position 속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있습니다.
• 이때 위치는 top과 bottom, left, right로 지정합니다. 각각 top이란 위쪽에서 얼마나 떨어져 있는지, bottom은 아래에서 얼마나 떨어져 있는지를 나타냅니다.
• 좌푯값은 양수와 음수 모두 사용할 수 있습니다.

 

1. static

• static은 position 속성의 기본 값으로 요소를 나열한 순서대로 배치하며 top이나 bottom, lift같은 속성을 사용할 수 없고 단지 float 속성을 이용해 좌우로 배치할 수 있습니다.

position : static가 기본값이므로 지정하지 않았을 때

<style>
    .exam1 {width: 600px; height: 130px; border: 2px solid; }
    .exam1 .box1 {float: left; width: 200px; height: 100px; background: pink; margin: 15px;}
    .exam1 .box2 {float: left; width: 300px; height: 100px; background: powderblue; margin: 15px;}
</style>     

2. relative

• position : relative도 static 에서처럼 나열한 순서대로 배치되지만 top이나 right, bottom, left 속성을 사용할 수 있으며 좌푯값을 사용해 위치를 지정할 수 있습니다.

하늘색 박스에 position : relative; top : 20px; left : -100px; 를 지정했을 때

<style>
    .exam2 {width: 600px; height: 150px; border: 2px solid; }
    .exam2 .box1 {float: left; width: 200px; height: 100px; background: pink; margin: 15px;}
    .exam2 .box2 {
        float: left; 
        position: relative; top: 20px; left: -100px; 
        width: 300px; height: 100px;
        background: powderblue; 
        margin: 15px;
    }
</style>     

3. absolute

• position : absolute 속성을 사용하면 문서의 흐름과 상관없이 left와 right, top, bottom 속성 값을 이용해 요소를 원하는 위치에 배치할 수 있습니다.
• 이때 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position : relative 를 지정한 요소입니다. 따라서 absloute를 사용하려면 그 요소를 감싸는 < div >를 만들고 position을 relative로 지정해 놓고 사용해야 합니다.

wrap의 부모박스에 position : relative를 지정하고 각각 자식 박스들에 position : absolute를 지정했을 때

<style>
    #wrap {position: relative; width: 600px; height: 300px; border: 2px solid;}
    #wrap .box {position: absolute; width: 100px; height: 100px; background: #80b14b;}
    #wrap #ex1 {top: 0; left: 0;}
    #wrap #ex2 {right: 0; top: 0;}
    #wrap #ex3 {left: 0; bottom: 0;}
    #wrap #ex4 {right: 0; bottom: 0;}
    #wrap #ex5 {left: 250px; top: 100px;}
</style>     

4. fixed

• fixed 속성 값도 absolute 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 됩니다.
• 브라우저 창의 왼쪽 위 꼭지점을 원점으로 두고 좌표가 계산되며 한번 배치되면 fixed라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시됩니다.
• 홈페이지에서 스크롤을 내려도 맨위에 있는 네비게이션 창이나 메뉴창이 따라 내려오는 것 등이 position : fixed 속성을 적용한 것입니다.

 

 

 

참고 : HTML5 + CSS3 웹표준의 정석