[CSS] position (포지션) 속성
position은 문서 상에 요소를 배치하는 방식이다. top, right, bottom, left 속성이 요소를 배치할 위치를 결정한다.
position 개념을 이해하기 전에 알아야할 특징은 position 속성은 상속되지 않는다는 것이다. 즉, 부모 요소의 position 값을 상속받지 않는다는 것이다.
-문법
position : static / relative / absolute / fixed
static
- 기본 값
- 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해줄 수 없다.
- 요소들이 html에 작성된 순서 브라우저 화면에 표시가 되며 따라서 top, bottom, right, left의 속성값은 무시됨
relative
- 원래 있던 위치를 기준으로 좌표 지정.
- 즉, 요소를 원래 위치를 기준으로 상대적 (relative) 하게 배치하게 해줌
absolute
- 절대 좌표와 함께 위치 지정 가능
- position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾음
- 만약 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면 최상위에 있는 body 요소가 배치 기준이 된다
- 대부분의 경우 부모 요소(가장 가까운 상위 요소)를 기준으로 top, left, bottom, rigth 속성을 적용한다.
fixed
- 스크롤과 상관없이 항상 문서 최 좌측 상단을 기준으로 좌표를 고정
- 주로 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법
- fixed 속성값의 배치 기준이 자신이나 부모요소가 아닌 뷰포트, 즉 브라우저 전체화면이기 때문에 top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로부터 해당 요소가 얼마나 떨어져 있는지를 결정
✔ 단, position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.
예시 밑 총정리도 같이 참고
예제 1 (relative, static)
먼저 예제를 위해 기본 값을 만들어 주도록 하겠다.
HTML
<!doctype html>
<html >
<head>
<style>
html{border:1px solid gray;}
div{
border:5px solid tomato;
margin:10px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>RESULT
그 다음에 me 상자에 오프셋을 부여하도록 하겠다. (#me 부분 참고)
left: 100px; 이랑 top; 100px; 은 왼쪽으로부터 100px, 탑으로부터 100px 떨어트린다 로 해석
(원래의 위치로부터 위에서 100px, 왼쪽에서 100px 떨어진다)
<!doctype html>
<html >
<head>
<style>
html{border:1px solid gray;}
div{
border:5px solid tomato;
margin:10px;
}
#me{
left:100px; /*오프셋이라고 부름/ 왼쪽으로 100px 만큼 움직인다*/
top:100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>RESULT
이때 사용해야 할 속성이 position: relative;다. 기본적으로 포지션에 아무런 설정을 가하지 않는다면 기본값인 static으로 설정이 되어있다. static은 오프셋을 부여해도 적용하지 않는 특징을 지니고 있다.
#me{
left:100px; /*오프셋이라고 부름/ 왼쪽으로 100px 만큼 움직인다*/
top:100px;
position: relative;
}RESULT
✔ 단 여기서 left(좌측)와 right(우측)가 같이 사용되면 순서와 상관없이 left가 우선이고 top과 bottom이 동시에 사용되면 top이 우선이다.
예제 2(absolute)
기본 HTML
<!doctype html>
<html >
<head>
<style>
#parent, #other{
border:5px solid tomato;
}
#me{
background-color: black;
color:white;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>RESULT
부모가 아니라 가장 가장자리인 html을 기준으로 위치를 지정하고 싶을 때는 position을 absolute 로 설정하면 된다.
#me{
background-color: black;
color:white;
position:absolute;
left: 0;
top: 0;
}
RESULT
position을 absolute로 설정하니 HTML을 기준으로 해서 자리가 잡히는 모습을 확인할 수 있다.
그런데 만약 left랑 top을 0으로 설정한 코드를 빼게 되면 (position은 absolute로 계속 설정)
부모 엘리먼트를 기준으로 해서 원래 위치해야 할 위치가 부모를 기준으로 정해지기 때문에 지금의 위치에 있는 것이다.
기본값은 원래 있기로 기대되는 곳이다. 또 position을 absolute로 설정하게 되면 부모의 태그와는 무관해진다.
즉, me라는 태그가 parent의 자식이 아닌 것처럼 된다. 그러므로 크기를 넓히고 싶다면 width값을 직접 지정해야한다.
만약 position을 relative로 설정하면
#me{
background-color: black;
color:white;
position:relative;
left: 0;
top: 0;
}RESULT
부모 태그를 기준으로 해서 오프셋이 설정 되는걸 볼 수 있다.
static이 아닌 다른 값을 주면 absolute의 엘리먼트는 static이 아닌 부모가 나타날때까지 무시하다가 static이 아닌 부모가 나타나면 그 위치를 기준으로 해서 오프셋 값을 지정한다.
정리:
- 부모중에 포지션 타입이 정해진 부모를 기준으로 위치 지정
- 부모와의 관계가 끊기기 때문에 자신의 콘텐츠 크기만 해진다
- 부모 역시도 자신의 자식을 없는 셈 친다
총정리
position: static
- 기본 값
- left/right/top/bottom의 값을 무시함
position: relative
- left/right/top/bottom을 원래 있던 위치(부모아래)를 기준으로 움직임
position: absolute
- left/right/top/bottom을 html태그 기준으로 (X)
정확히는 "가까운 조상 중에 position:static 이 아닌 조상을 기준으로" (모두 없으면 그때, html임)
- absolute를 하고, offset을 설정하지 않았다면 부모 밑에 그대로 있음
기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문
- absolute로 설정하게 되면 부모와의 링크가 끊김
크기도 content크기로 바뀜 (따로 설정하면 됨)
position: fixed
- left/right/top/bottom을 화면 기준 (스크롤에 독립적)
- absolute와 마찬가지로 부모와의 링크가 끊김
크기도 content크기로 바뀜 (따로 설정하면 됨)
cf) 우선순위 : left > right , top > bottom
참고자료:
https://www.daleseo.com/css-position/
CSS의 position 속성으로 HTML 요소 배치하기
Engineering Blog by Dale Seo
www.daleseo.com