CSS position 속성

CSS 에서 특정 요소의 위치를 지정하는 속성으로 position 속성이 있습니다. 이 position 속성을 이용해 요소의 위치를 지정하는 다양한 방법을 알아 봅시다.

position 속성에는 아래의 값들을 사용할 수 있습니다.

• initial
• inherit
• static
• fixed
• relative
• absolute
• sticky

이 값 들중 initial 이나 inherit 은 다른 요소에서도 동일하게 적용되는 것들이니 따로 기록으로 남기지 않겠습니다. 또한 sticky 의 경우 아직 정식적으로 모든 브라우저가 지원하는 케이스가 아니니 이 또한 기록으로 남기지 않고, 나머지 4개( static | fixed | relative | absolute )에 대해서만 알아보겠습니다.

static

position 을 아무것도 지정하지 않으면 사용되는 기본 값입니다. position 속성을 static 으로 지정하면 위치가 지정된 것이 아니라 그냥 HTML 문서에 따라 위치가 정해졌다고 보면 됩니다. 기본 값이기 때문에 보통의 경우 잘 쓰이지 않는 값입니다.

div.static { position: static; }

fixed

position 을 fixed 로 지정하면 해당 요소의 위치를 사용자의 브라우저를 기준으로 설정할 수 있습니다. 스크롤을 내려도 항상 같은 곳에 위치하는 상단바, 하단바, 광고 등이 이 속성을 이용하는 것입니다.

이를 위해서는 top, bottom, left, right 등으로 위치를 지정하고 width 와 height 로 요소의 크기를 지정할 수 있습니다.

예를 들어 스크롤을 내려도 하단에 항상 고정되어 있는 하단바를 만들기 위해서는 아래와 같이 position 속성을 사용할 수 있습니다.

div.footer-bar { 
    position:   fixed;
    left:       0;
    bottom:     0;
    width:      100%;
    height:     32px;
}

relative

position 을 relative 로 지정하면 해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 할 수 있습니다. 이 말을 다른 말로 하면 position 을 relative 로 지정하더라도 top 이나 left 등으로 새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 다르지 않음을 이야기 하는 것입니다.

div.relative {
    position:   relative;
    left:       100px;
    top:        -100px;
}

absolute

position 을 absolute 로 지정하는 것은 fixed 와 비슷하지만 다릅니다. 무슨 말인고 하니 fixed 는 사용자의 브라우저를 기준으로 위치를 고정시키는 것이지만, absolute 는 해당 요소의 위치가 지정된 부모 요소를 기준으로해서 fixed 시키는 것과 같다고 생각하면 됩니다.

위치가 지정된 부모요소라는 것은 결국 position 속성이 static 이 아닌 다른 값으로 지정 되어야 함을 의미합니다.

div.parent { 
    position:   relative;
}
div.child { 
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
}

위 예제의 경우 parent 라는 클래스의 자식 요소인 child 클래스 요소는 parent 와 같은 위치에 같은 크기로 표시 됩니다. 두 div 요소를 겹쳐 놓은 것과 마찬가지입니다.

만약 parent 클래스의 요소의 position 을 fixed 로 지정했다면 child 클래스 요소도 parent 와 마찬가지로 화면을 스크롤해도 항상 같은 위치에서 사용자에게 보여질 것입니다.

---

출처 : http://triki.net/triki/css-position-1481