반응형
18．포지션
엘리먼트의 위치를 지정하는 4가지 방법이 있습니다.
- static : 기본값으로 위치정보를 임의로 설정해줄 수 없습니다..
- relative : 상대위치로, static 위치 사용 시 있던 위치를 기준으로 이동합니다.
- absolute : 절대위치로, 문서 최좌측 상단을 기준으로 위치 정보를 설정하며 스크롤시 이동합니다.
- fixed : 위치 고정으로 스크롤과 상관없이 항상 문서 최좌측 상단을 기준으로 좌표가 설정됩니다.
이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다.
엘리먼트의 위치를 정하는 속성 position 속성 값 4가지
1. static(기본값) : 움직이지 않고 정적인 상태
2. relative : 부모 엘리먼트를 기준으로 상대적으로 움직입니다.
3. absolute : position값이 relative인 부모를 기준으로 (없다면 웹페이지의 가장 가장자리 기준) 움직입니다.
* 자식의 위치 값이 absolute이면 부모와의 관계가 끊기고 그래서 자신의 크기가 딱 컨텐츠만해집니다.
그리고 값을 아예 없애면 원래 위치로 돌아갑니다.
4. fixed : 스크롤을 움직여도 지정된 위치에 고정됩니다.
* absolute와 마찬가지로 부모와의 관계가 끊기고 크기는 자신의 컨텐츠만 해집니다.
1) static vs relative
position_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html
border: 1px solid gray;
div
border: 5px solid tomato;
margin: 10px
#me
position: relative;
left:100px;
top:100px;
bottom:100px;
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
실행화면
position을relative로 지정한 뒤 left right를 둘 다 지정해도left만 따르게 되고 top과 bottom을 지정하면 top만 따르게 됩니다.
만약 다음과 같이 position: relative를 삭제한 뒤 다시 실행해보면
position_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html
border: 1px solid gray;
div
border: 5px solid tomato;
margin: 10px
#me
left:100px;
top:100px;
bottom:100px;
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
실행화면
아래와 같이 left와top값이 무시되었음을 알 수 있습니다.
기본적으로 position은 static값으로 지정되어 있습니다. 하지만 position을 relative로 바꾸면 부모 엘리먼트에서 상대적으로 위치를 지정하게 됩니다.
2) absolute
position_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#parent, #other
border: 5px solid tomato;
#me
background-color: black;
color:white;
position: absolute;
left: 0px;
top: 0px;
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
실행화면
다음과 같이 me는 absolute로 포지션이 지정되었으므로 최좌측상단을 기준으로 위치가 지정됬음을 알 수 있습니다.
만약 다음 예제와 같이 static이 아닌 relative 부모를 만들어보고 다시 실행해봅시다.
position_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#parent, #other
border: 5px solid tomato;
#grand
position: relative;
#me
background-color: black;
color:white;
position: absolute;
left: 0px;
top: 0px;
</style>
</head>
<body>
<div id="other">other</div>
<div id="grand">
<div id="parent">
parent
<div id="me">me</div>
</div>
</div>
</body>
</html>
실행화면
아래와 같이 grand가 relative이므로 최좌측상단이 기준이 아닌 grand를 기준으로 위치가 결정됩니다.
3) fixed
fixed포지션을 위해서 다음과 같이 fixed속성을 적용한 예제를 실행시켜 봅시다.
position_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#parent, #other
border: 5px solid tomato;
#large
height:10000px;
background-color: tomato;
#me
background-color: black;
color:white;
position: fixed;
left: 0px;
top: 0px;
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large">
</div>
</body>
</html>
실행화면
실행시켜 보면 absolute속성과 비슷해보입니다.. 하지만 스크롤을 해보면
아래와 같이 fixed가 적용된 엘리먼트는 계속 고정되어있습니다. 즉 스크롤로부터 독립되어 있습니다.
아래와 같은 소스를 이용하면 다음과 같이 계속 따라 다니는 배너 광고처럼 만들 수 있습니다.
position_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
padding-top:30px;
#parent, #other
border: 5px solid tomato;
#large
height:10000px;
background-color: tomato;
#me
background-color: black;
color:white;
position: fixed;
left: 0px;
top: 0px;
width:100%;
height:30px;
text-align: center;
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large"></div>
</body>
</html>
'프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 정리 - 22. 다단(multi column) (0) | 2018.01.15 |
|---|---|
| 생활코딩 css 정리 - 21. Float (0) | 2017.12.18 |
| 생활코딩 css 정리 - 20. media query (0) | 2017.12.10 |
| 생활코딩 css 정리 - 19. flex (0) | 2017.12.02 |
| 생활코딩 css 정리 - 20.마진 겹침 현상 (0) | 2017.11.20 |
| 생활코딩 css 정리 - 19. box-sizing (0) | 2017.11.19 |
| 생활코딩 css 정리 - 18. 박스 모델 (0) | 2017.11.15 |
| 생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨 (0) | 2017.10.15 |