[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 와 마찬가지로 화면을 스크롤해도 항상 같은 위치에서 사용자에게 보여질 것입니다.
하나씩 가지고 놀다 보면 어떤 느낌인지 알 수 있으니 많이 실습해 보는 것이 좋을 것입니다.
댓글 남기기