[css] position (static, relative, absolute, fixed) 의 속성
position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다.
position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.
position 사용법
static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
소스코드
HTML
<!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">
<link href="./static/css/common.css" rel="stylesheet" />
<link href="./static/css/style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="a"> a영역 </div>
<div class="b"> b영역 </div>
<div class="c"> c영역 </div>
</body>
</html>CSS
div {
width: 100px;
height: 100px;
}
.a {
background: #52D4FF;
}
.b {
background: #FF63EA;
}
.c {
background: #C5FF63;
}결과
position:static 속성 적용하기
CSS
div {
width: 100px;
height: 100px;
}
.a {
background: #52D4FF;
position: static;
}
.b {
background: #FF63EA;
position: static;
}
.c {
background: #C5FF63;
position: static;
}결과
position:static 속성은 전과 후가 같다.
position:relative 속성 적용하기
position: relative 속성은 static의 원래 위치부터 계산한다.
위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정할 수도 있다.
아래 그림과 같이 b영역은 원래 위치에서 위 0px, 왼쪽 100px 로 위치시켰고,
c 영역은 원래 위치에서 위 0px, 왼쪽 200px 로 위치 시켰다.
div {
width: 100px;
height: 100px;
}
.a {
background: #52D4FF;
position: static;
}
.b {
background: #FF63EA;
position: relative;
top: 0;
left: 100px;
}
.c {
background: #C5FF63;
position: relative;
top: 0;
left: 200px;
}결과
position:absolute 속성 적용하기
position: absolute 속성은 static이나 relative 와 다르게 바깥 쪽에 공간이 생기지 않는다.
여기서 absolute는 상위 요소인 static 위치를 기준으로 위치가 결정 된다.
div {
width: 100px;
height: 100px;
}
.a {
background: #52D4FF;
position: static;
}
.b {
background: #FF63EA;
position: absolute;
top: 0;
left: 100px;
}
.c {
background: #C5FF63;
position: absolute;
top: 0;
left: 200px;
}
결과
HTML
<!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">
<link href="./static/css/common.css" rel="stylesheet" />
<link href="./static/css/style.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="a"> a영역
<div class="b"> b영역 </div>
<div class="c"> c영역 </div>
</div>
</body>
</html>CSS
div {
width: 100px;
height: 100px;
}
.a {
width: 300px;
height: 300px;
background: #52D4FF;
position: relative;
top: 100px;
left: 100px;
}
.b {
background: #FF63EA;
position: absolute;
top: 0;
left: 100px;
}
.c {
background: #C5FF63;
position: absolute;
top: 0;
left: 200px;
}결과
위와 같은 경우는 static (a영역) 안에 설정된 absolute (b영역, c영역) 은 a영역부터 시작해서 위치가 결정됨을 알 수 있다.
position:fixed 속성 적용하기
position: fixed 속성은 브라우저 화면의 상대 위치이다.
따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않는다.
CSS
div {
width: 100px;
height: 100px;
}
.a {
width: 300px;
height: 300px;
background: #52D4FF;
position: static;
top: 100px;
left: 100px;
}
.b {
background: #FF63EA;
position: absolute;
top: 0;
left: 100px;
}
.c {
background: #C5FF63;
position: fixed;
top: 0;
left: 200px;
}결과
'웹앱 > CSS' 카테고리의 다른 글
| flex 속성 알아보기 (0) | 2022.05.01 |
|---|---|
| CSS 기초 - text 속성 (0) | 2021.08.28 |
