[css] position (static, relative, absolute, fixed) 의 속성
[css] position (static, relative, absolute, fixed) 의 속성
position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다.
position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.
position 속성 사용법
static (기본값) :위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
기본 html 소스
실행 결과는 다음과 같다.
이제부터 위의 html 문서에서 position 속성을 적용해 보자.
1. position: static
div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: static;}
div#c {
background: #C5FF63;
position: static;}
position: static 속성은 설정 전과 후가 같다.
2. position: relative
div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: relative;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: relative;top: 0px;
left: 200px;
}
position: relative 속성은 static의 원래 위치부터 계산한다.
위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정할 수도 있다.
아래 그림과 같이 b영역은 원래 위치에서 위 0px, 왼쪽 100px 로 위치시켰고,
c 영역은 원래 위치에서 위 0px, 왼쪽 200px 로 위치 시켰다.
3. position: absolute
div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: absolute;top: 0px;
left: 200px;
}
position: absolute 속성은 static이나 relative 와 다르게 바깥 쪽에 공간이 생기지 않는다.
여기서 absolute는 상위 요소인 static 위치를 기준으로 위치가 결정 된다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
width: 300px;
height: 300px;
background: #52D4FF;
position: relative;
top: 100px;
left: 100px;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: absolute;
top: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</div>
</body>
</html>
위와 같은 경우는 relative (a영역) 안에 설정된 absolute (b영역, c영역) 은 a영역부터 시작해서 위치가 결정됨을 알 수 있다.
4. position: fixed
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
width: 300px;
height: 300px;
background: #52D4FF;
position: relative;
top: 100px;
left: 100px;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: fixed;
top: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</div>
</body>
</html>
position: fixed 속성은 브라우저 화면의 상대 위치이다.
따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않는다.
ie7, ie8 브라우저 환경에서는 position: fixed 속성이 적용되지 않으므로 문서 타입을 규정해 주어야 한다.
'develop > css' 카테고리의 다른 글
| [css] overflow (visible, hidden, scroll, auto) 속성 (0) | 2017.10.23 |
|---|---|
| [css] 여백 (margin, padding) 속성 (0) | 2017.09.26 |
| [css] clear(none, both, left, right) 의 속성 (0) | 2017.09.24 |
| [css] float(none, left, right) 의 속성 (0) | 2017.09.24 |
| [css] display (none, inline, inline-block, block) 와 visibility (visible, hidden, collapse) 의 차이 (0) | 2017.09.23 |