7. 포지션이란
- 요소를 화면에 배치하기 위한 기법으로 기준점을 이용하여 요소를 특정 위치에 배치하는 방법
- 기준점 및 배치방법에 따라 절대포지션, 상대포지션, 고정포지션 세가지 방법을 사용
(1) Position 종류
- Absolute Position(브라우저 또는 상위요소를 기준으로 배치하는 방법)
- Relative Position(자기자신을 기준으로 배치하는 방법)
- Fixed Position(스크린을 기준으로 배치하는 방법)
(2) Position사용시 기준좌표 입력방법
- 포지션 적용시 기준이 되는 요소의 Edge중(이때 Edge는 top, right, bottom, left)로부터 자기자신의 Edge까지의 거리값을 입력
(3) Position 요소 z-index
- 포지션을 적용한 요소는 포토샵의 레이어 개념과 동일한 z-index를 사용하여 요소를 겹쳐서 사용할 수 있다.
(4) Position과 일반요소(포지션을 적용하지 않은 요소)
- 포지션요소와 포지션을 적용하지 않은 요소는 서로 간섭하지 않으며 포지션 요소는 무조건 일반요소 위에 배치됨(예외:z-index를 사용하는 경우 아래에 배치될 수 있음)
1) 포지션 절대배치
- 절대포지션 적용시 자신의 자리를 비우고 자신의 자리를 다른 요소가 차지하게 된다.
- 기준좌표를 사용하지 않을 경우 현재위치에서 이동하지 않음
- 기준좌표를 입력하면 브라우저(body)를 기준으로 이동함.
- 기준좌표 top, right, bottom, left를 기준으로 이동하며 좌표는 x,y를 기준으로 2개를 입력해야 함
- 절대포지션을 적용시 width값이 없는 경우 width는 콘텐츠 크기로 변경됨(inline형태를 취함)
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>포지션 절대배치</title> <style type="text/css"> *{margin:0; position: 0;} .box1{width:100px; height: 100px; background-color: #f00;} .box2{height: 150px; background-color: #0f0;} .p1{position: absolute;} .p2{position:absolute; right:0px; top:0px;} .box3{height: 50px; background-color: #f00;} .p3{position: absolute;} .p4{position:absolute; right:0; bottom:0;} .p5{position:absolute; left:0; bottom:0;} </style> </head> <body> <h2>요소에 절대배치 적용, 기준좌표 미입력</h2> <div class="box1 p1"></div> <div class="box2"></div> <h2>요소에 절대배치 적용, 기준좌표 입력</h2> <div class="box1 p2"></div> <div class="box2"></div> <h2>요소에 절대배치 적용, 기준좌표 입력, width값 선언X</h2> <div class="box3 p3">박스1</div> <div class="box2"></div> <h2></h2> <div class="box1 p4"></div> <div class="box1 p5"></div> </body> </html> |
■ 실행결과1
※ p1 → 절대배치 적용하면 p1은 자신의 자리를 비운다. box2번이 p1에 자리를 차지함 → box2번은 h2요소 다음에 위치함.
※ p1은 box2번 위에 배치되며 기준좌표를 사용하지 않을 경우 현재위치에서 이동하지 않음
※ p2 → 절대포지션 적용시 자신의 자리를 비우고 p2(자신)의 자리를 box2가 차지함
기준좌표를 입력하면 브라우저(body)를 기준으로 이동함.
기준좌표 top, right, bottom, left를 기준으로 이동하며 좌표는 x,y를 기준으로 2개를 입력해야 함
※ p3 → 절대포지션을 적용시 width값이 없는 경우 width는 콘텐츠 크기로 변경됨(inline형태를 취함)
2) 포지션 상대배치
- 상대배치는 자기자신을 기준으로 배치하는 방식
- 상대배치는 자신의 자리를 절대로 다른요소에게 내어주지 않음
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>포지션 상대배치</title> <style type="text/css"> *{margin:0; padding:0;} .box1{width: 100px; height:100px; background-color: #f00; position:relative;} .box2{width: 150px; height: 150px; background-color: #0f0;} .r1{left:50px; top:50px;} </style> </head> <body> <h2>Relative Position</h2> <div class="box1">박스1</div> <div class="box2">박스2</div> <div class="box1 r1">박스3</div> </body> </html> |
■ 실행결과2
※ 박스 1번은 relative만 적용시 박스요소는 이동하지 않음.
※ 박스 1번은 공중부양된 상태이며, 자신의 자리를 다른요소에게 절대로 내어주지 않음
3) 포지션 고정배치
- 고정배치는 절대포지션과 사용법은 동일하나 브라우저의 스크롤 유무에 따라 요소의 이동이 일어나지 않음(스크린고정)
■ 예시3-1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>포지션 고정배치</title> <style type="text/css"> *{margin:0; padding:0;} .box{width:100px; height: 100px; } .box1{background-color: #f00; position:absolute; left:0; top:0;} .box2{background-color: #0f0; position:fixed; right:0; top:0;} .page{height:1000px; background-color: #ccc;} </style> </head> <body> <h2>Fixed Position</h2> <div class="box box1"></div> <div class="box box2"></div> <p class="page">스크롤을 생성하게 합니다.</p> </body> </html> |
■ 실행결과 3-1
※ 스크롤을 하면서 테스트 해보세요. fixed 되어 있는 요소는 스크롤을 해도 항상 그 자리에 있는 것처럼 보인답니다.
■ 예시3-2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>포지션 고정배치2</title> <style type="text/css"> *{margin:0; padding:0;} .p1{width: 300px; height: 200px; background-color: #00f;} .c1{width: 50px; height: 50px; background-color: #f00;} .c11{position: absolute; right:0; top:0;} .p12{position: relative;} /* 부모가 relative여야 부모가 자리를 지킴 */ .c12{position: absolute; right:0; bottom:0;} </style> </head> <body> <h2>계층구조1</h2> <div class="p1"> <div class="c1 c11"></div> </div> <h2>계층구조2</h2> <div class="p1 p12"> <div class="c1 c12"></div> </div> </body> </html> |
■ 실행결과 3-2
※ 이 예제에서 알 수 있는 점은 계층구조에서 부모의 포지션이 relative여야만 부모가 자리를 지키면서 자식이 부모영역 안에 좌표위치를 잡는다는 점입니다.
포지션 좌표는 기본적으로 body를 기준으로 하기 때문에, 자식이 부모의 포지션을 참조하도록 부모에게 position: relative; 를 선언하는 것이 중요합니다.