[ 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 => 스크롤과 관계없이 고정된 위치에 배치되도록할 수 있다.(상단 메뉴등에 활용할 수 있음)
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <style> html{ border:1px solid gray; } div{ border:5px solid tomato; margin:10px; } #me{ /* offset(top,right,bottom,left) position:relative 혹은 absolute를 지정하지 않으면 기본은 position:static이다. position:static이면, left, right, bottom, top 등의 속성이 먹지 않고 본래 있어야되는 위치에 있게 된다. 자신이 있어야하는 위치(부모기준)를 기준으로 상대적으로 위치를 조정하고 싶으면 position:relative를 쓴다. 그런 부모에 따른 자신의 위치는 무시하고 사용할 때는 position:absolute 를 쓴다. child 요소에 absolute를 지정하면 부모요소와의 관계성은 상실되게 된다. 또한, absolute는 position:static(기본) 인 부모는 무시하다가 그 외의 position 속성인 relative나 absolute가 지정된 부모를 기준으로해서 offset위치를 지정하게 된다. */ position: relative; left:100px; top:100px; } div #child{ border:1px solid red; position:absolute; right:0px; bottom:0px; } </style> </head> <div id="other">other</div> <div id="parent"> parent <div id="me">me</div> </div> <div id="parent2"> <div id="child"> </div> </div> |
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 | <!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> #parent,#other{ border:5px solid tomato; } #large{ height:10000px; background-color:tomato; } #me{ background-color:black; color:white; position:fixed; left:0; top:0; width:100%; height:30px; text-align:center; } </style> </head> <div id="other">other</div> <div id="parent"> parent <div id="me">me</div> </div> <div id="large">large</div> |
'개발 > 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 |