[CSS] Position 속성(static, absolute. relative, fixed)
- 웹 개발/CSS
- 2019. 5. 1. 14:18
요소의 위치를 지정하는 방법
1. padding
- 내부요소의 위치를 지정할 때만 사용
2. margin
- 블럭(인라인) 요소의 위치를 지정할 때 사용.
3. position
- 애가 정석임.
4. transform
요소의 위치, position
- x좌표, y좌표
- 좌표를 지정하는 방식이 여러가지 제공된다.
- 좌표계 지정.
1. position: static;
-정적 좌표
- 좌표값을 이용해서 배치하는 방식이 아니다.(left와 top 무용지물.)
- Flow Layout 방식+6333333333333333333333333336+
2. position: absolute;
- 절대 좌표
- 문서의 좌측 상단을 기준으로하는 좌표계
- 원래 있는 공간은 사라진다
- (**)자신의 직계조상 부모태그중 순서대로 검색하다가 가장 처음으로 만나는 position이 static이 아닌 조상 부모태그를 기준으로 하는 좌표계
3. position: relative;
- 상대 좌표
- 원래 자신이 있던 공간의 좌측 상단을 기준으로함
- 원래있던 공간은 사라지지 않는다.(visibility:hidden과의 성질이 비슷.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <style> #pbox{ position:relative; left:250px; top:0px; } #box2 { position: absolute; left: 20px; top: 20px; } </style> <body> <div id="pbox" class ="box big green"> <div id="box2" class="box medium yellow">상자2</div> </div> </body> | cs |
4. position: fixed;
- 고정좌표
- absolute와 유사
- 스크롤에 반응하지 않고 현재 화면을 기준으로 배치
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> #box{ width:100%; height:40px; } #menu{ height:70px; position:fixed; /* width:100%; */ left:50px; right:50px; top:-50px; } #menu:hover{ top:0px; } #orange{ background-color:orange; } </style> <body> <div id ="menu" class="box orange">메뉴</div> </body> | cs |
'웹 개발 > CSS' 카테고리의 다른 글
| [CSS] 그림자, text-shadow 속성 (0) | 2019.05.08 |
|---|---|
| [CSS] display 속성(none, block, inline, inline-block), hover (0) | 2019.04.28 |
| [CSS] overflow 속성 알아보기 (2) | 2019.04.24 |
| [CSS] 수치표현 (pt,px,em,%,rem,ex,mm,cm,pc, in) (0) | 2019.04.21 |
| [CSS] 스타일 시트 선택자(Selector) 개념 및 사용법 종류 (0) | 2019.04.20 |