relative




소스 코드

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box1{
                position: static; /* 기본값 static , 물처럼 흐르듯이 표현*/
                left: 100px;
                width:300px;
                height:300px;
                background-color: yellow; 
                display: inline-block;
            }
            .box2{
                position: relative; /* top left는 static이 아닌 속성에 모두 적용가능 */
                top: 100px;
                left: 100px;
                width:300px;
                height:300px;
                background-color: red; 
                display: inline-block;
            }
            .box3{
                width:300px;
                height:300px;
                background-color: green; 
                display: inline-block;
            }
            .box4{
                width:300px;
                height:300px;
                background-color: blue; 
                display: inline-block;
            }
            .box5{
                width:300px;
                height:300px;
                background-color: bisque; 
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    </body>
</html>
 
 
 
cs



box2의 스타일 left, top은 box1과 body에 관계하여 적용되었다.



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
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
58
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body{
                position: relative;
            }
            .box1{
                
                width:300px;
                height:300px;
                background-color: yellow; 
                display: inline-block;
            }
            /* absolute 는 도화지가 한 장 더 생긴다. */
            .box2{
                position: absolute;
                left: 100px;
                top: 100px;
                width:300px;
                height:300px;
                background-color: red; 
                display: inline-block;
            }
            .box3{
                width:300px;
                height:300px;
                background-color: green; 
                display: inline-block;
            }
            .box4{
                width:300px;
                height:300px;
                background-color: blue; 
                display: inline-block;
            }
            .box5{
                width:300px;
                height:300px;
                background-color: bisque; 
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    </body>
</html>
 
 
 
cs


빨간색 box가 다른 box들 위에 나타난다. (새로운 도화지에 그린 느낌)



fixed


코드 그냥 안넣겠습니다 위의 코드에서 box2의 position 속성만 fixed 로 바꿔주면 되니까



스크롤해도 빨간색box가 fixed(고정)된 위치에 나타납니다.

저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

input 태그  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03

+ Recent posts

티스토리툴바