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>


블로그 이미지

가카리

프로그래밍, 취업 및 직장생활, 주식 부동산 재테크 전문 블로그

Tag ,

댓글을 달아 주세요