포지션
엘리먼트의 위치를 지정하는 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> |
