[ position offset ]
[엘리먼트의 위치를 정하는 속성 position 속성값 4가지]
1. static(기본값) : 움직이지 않고 정적인 상태 => position:static
2. relative : 부모 엘리먼트를 기준으로 상대적으로 움직인다 => position:relative
3. absolute : position값이 relative인 부모를 기준으로(없다면 웹페이지의 가장 가장자리 기준) 움직인다. => position:absolute
* 자식의 위치값이 absolute이면 부모와의 관계가 끊기고 그래서 자신의 크기가 딱 컨텐츠만 해진다.
그리고 값을 아예 없애면 원래 위치로 돌아간다.
4. fixed : 스크롤을 움직여도 지정된 위치에 고정된다. => position:fixed
* absolute와 마찬가지로 부모와의 관계가 끊기고 크기는 자신의 컨텐츠만 해진다.
offset
- top
- right
- bottom
- left
~만큼씩 위치를 떨어져 위치될지 결정할 수 있는데 position 속성과 같이 사용된다.
아무것도 지정하지 않을 경우 position:static이 지정되어 있는데 이때는 이 offset 속성들은 영향을 주지 못한다.
따라서, position:relative 나 position:absolute를 사용해서 해야하는데
position:relative의 경우 부모와의 상대위치를 기준으로하는 것이다. 즉 자식이 position:relative라면 자신의 부모를 기준으로해서
left:10px; top:20px; 이면 부모를 기준으로해 위는 20px 떨어진 위치 왼쪽으로부터 10px 떨어진 위치에 위치하게 된다.
position:absolute의 경우 절대위치를 가리키는데 이떄는 position:static인 부모들은 무시하고 그 외의 position:relative나 position:absolute가 지정된 부모를 기준으로해서 배치되게 된다.
즉, 자신의 부모가 기준이 아니다!
또한 이러한 position:absolute는 z-index, fixed와 함께 사용되 메뉴를 구성하는데 사용될 수 있다.
position : fixed => 스크롤과 관계없이 고정된 위치에 배치되도록할 수 있다.(상단 메뉴등에 활용할 수 있음)
'개발 > css' 카테고리의 다른 글
| 반응형 웹의 핵심 media Query (0) | 2017.06.04 |
|---|---|
| 화면의 Layout을 그리는 Flex에 대하여... (0) | 2017.06.04 |
| layout 관련 속성 (0) | 2017.06.03 |
| 폰트 곤련 속성 및 외부 폰트 설정하기 (0) | 2017.06.03 |
| css의 가상 선택자(link, hover, visited, focus) (0) | 2017.06.03 |