Position 속성
position 은 css 속성으로 레이아웃을 배치하거나, 객체를 위치시킬때 사용된다. position 속성은 상속되지 않으며 top, bottom, left , right의 위치를 같이 설정 할 수 있다.
• static (기본값) :위치를 지정하지 않을 때 사용한다.
• relative : 위치를 계산할 때 static의 원래 위치부터 계산한다.
• absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 부모 요소를 기준으로 위치가 결정 된다.
• fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 부모 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있고 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
HTML기본코드
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
#a {
background: red;
}
#b {
background: green;
}
#c {
background:blue;
}
</style>
</head>
<body>
<div id="a">
A영역
</div>
<div id="b">
B영역
</div>
<div id="c">
C영역
</div>
</body>
</html>
1. Position: static
static은 element가 문서(HTML)에서 일반적인 흐름을 따라 배치된다. element에 position을 지정하지 않았을 때 기본(default)으로 적용되는 값이 static이다.
<style>
#a {
background: red;
position: static;
}
#b {
background: green;
position: static;
}
#c {
background:blue;
position: static;
}
</style>
=> static의 경우 top, right, bottom, left, z-index 속성들이 아무런 효과를 주지 못한다.
2. Position: relative
static과 마찬가지로 element가 문서의 일반적인 흐름에 따라 배치된다. static과의 차이점은 element가 자신의 static위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인(relative)위치에 배치된다는 점이다.
#a {
background: red;
position: relative;
}
#b {
background: green;
position: relative;
top: 0px;
left: 100px;
}
#c {
background:blue;
position: relative;
top: 0px;
left: 200px;
}
=> position: relative 속성은 static의 원래 위치부터 계산한다. top, bottom, left, right의 위치를 같이 설정할 수도 있다. 아래 그림과 같이 b영역은 원래 위치에서 top: 0px, left: 100px로 위치시켰고, c영역은 원래 위치에서 top: 0px, left: 200px로 위치시켰다.
relative로 지정한 element는 다른 요소들의 위치에 영향을 주지 않는 특징을 가진다.지는데요. relative를 사용시 글자가 겹쳐지게도 보일 수 있으므로 주의가 필요하다.
3. Position: absolute
absolute는 element가 문서의 일반적인 흐름을 따르지 않는다. 대신 가장 가까운 위치에 있는 부모 element에 대해 상대적 위치로 배치된다. 부모 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직인다.
#a {
background: red;
position: static;
}
#b {
background: green;
position: absolute;
top: 0px;
left: 100px;
}
#c {
background:blue;
position: absolute;
top: 0px;
left: 200px;
}
=> position: absolute속성은 static이나 relative와 다르게 바깥 쪽에 공간이 생기지 않는다. 자식태그는 부모태그가 static을 제외하고 부모태그는 자식태그의 기준이 된다.
4. Position: fixed
fixed 역시 absolute와 마찬가지로 element가 문서의 일반적인 흐름을 따르지 않는다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치된다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.
//뷰포트(viewport) : 웹페이지가 사용자에게 보여지는 영역//
웹 페이지를 방문해보면 선택 박스 같은 것들이 스크롤을 아래로 내려도 따라다니는 것을 보신적이 있을 것이다. 이러한 기능을 fixed를 통해 구현할 수 있다.
#a {
width: 300px;
height: 300px;
background: red;
position: relative;
top: 100px;
left: 100px;
}
#b {
background: green;
position: absolute;
top: 0px;
left: 100px;
}
#c {
background: blue;
position: fixed;
top: 0px;
left: 200px;
}
=> position: fixed속성은 브라우저 화면의 상대 위치이다.따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않는다.
