Web/CSS
[CSS-Visual Studio Code] Position
삐옥
2021. 12. 16. 12:07
Position
1. padding
2. margin
3. position
4. trasform > CSS3
position: static | absolute | relative | fixed ;
position
: 요소의 위치를 지정하는 속성
- 좌표값 사용
- x(left), y(top)
- 좌표를 지정하는 방식이 여러개 제공(좌표계 > 기준점)
1. position: static
- 정적 좌표
- 기본값
- FlowLayout 방식
- 워드 프로세스 방식
- 코딩 순서대로 출력되는 방식
위 -> 아래,
왼쪽 -> 오른쪽
- 좌표값 지원 안됨(left, top 사용 불가능)
2. position: absolute
- 절대 좌표
- 기준점: 문서의 좌측 상단
- 모든 태그가 동일하게 문서의 좌측 상단을 원점으로 함
- 원래있던 공간 사라짐
- * 기준점(원점): 자신의 직계 조상 중 가장 처음으로 만나는 태그 중 position이 static이 아닌 태그를 원점으로 한다.
계속 상위 체크를 해야한다.★
3. position: relative
- 상대 좌표
- 기준점(원점)
- 태그가 저마다 각각 자신의 원래 위치를 원점으로 한다.
- 원래 있던 공간 유지
4. position: fixed
- 고정 좌표
- 기준점(원점) : 브라우저 화면 좌측 상단
- 스크롤에 반응하지 않고 화면에 고정
- 원래 있던 공간이 사라짐
설 명
1. 기본 = 틀이되는 코드
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 10px solid black;
width: 200px;
height: 200px;
}
#box1 { background-color: tomato ; }
#box2 { background-color: gold; }
#box3 { background-color: cornflowerblue; }
</style>
</head>
<body>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>
</html>
|
cs |
초기상태
2. static
3. absolute
4. relative
5. fixed
