포지션
엘리먼트의 위치를 지정하는 4가지 방법이 있습니다.
- static
- relative
- absolute
- fixed
- 이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다.
static VS relative
예제 - position_1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html><html> <head> <style> html{border:1px solid gray;} div{ border:5px solid tomato; margin:10px; } #me{ position: relative; left:100px; top:100px; } </style> </head> <body> <div id="other">other</div> <div id="parent"> parent <div id="me">me</div> </div> </body></html> |
absolute
예제 - position_2.html
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 | <!DOCTYPE html><html> <head> <style> #parent, #other, #grand{ border:5px solid tomato; } #grand{ position: relative; } #me{ background-color: black; color:white; position: absolute; left:0; top:0; } </style> </head> <body> <div id="other">other</div> <div id="grand"> grand <div id="parent"> parent <div id="me">me</div> </div> </div> </body></html> |
fixed
예제 - position_3.html
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 | <!DOCTYPE html><html> <head> <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:0; top:0; text-align: center; } </style> </head> <body> <div id="other">other</div> <div id="parent"> parent <div id="me">me</div> </div> <div id="large">large</div> </body></html> |
