CSS position 속성

1 개요

CSS position Property

CSS position 속성

2 값 목록

• static: 위에서 아래로 순서대로 배치됨(기본값).top, left 지정 무시됨
• relative: 상대적인 위치
• absolute: 절대적인 위치(부모 기준). 스크롤시 그에 따라 움직임
• fixed: 절대적인 위치(화면 기준). 스크롤해도 화면 위치 그대로 고정됨.

3 예시

<style>
.container {
  margin: 20px;
  height: 200px;
  background-color: silver;
  font-size: 30px;
}
.box {
  width: 40px;
  height: 40px;
  left: 40px;
  top: 40px;
}
.box-a {
  position: static;
  background-color: red;
}
.box-b {
  position: relative;
  background-color: green;
}
.box-c {
  left: 100px;
  position: absolute;
  background-color: blue;
}
.box-d {
  left: 200px;
  position: fixed;
  background-color: yellow;
}
</style>

<div class='container'>가
  <div class='box box-a'>A1</div>
  <div class='box box-a'>A2</div>
</div>
<div class='container'>나
  <div class='box box-b'>B1</div>
  <div class='box box-b'>B2</div>
</div>
<div class='container'>다
  <div class='box box-c'>C1</div>
  <div class='box box-c'>C2</div>
</div>
<div class='container'>라
  <div class='box box-d'>D1</div>
  <div class='box box-d'>D2</div>
</div>
<div class='container'>마</div>
<div class='container'>바</div>
<div class='container'>사</div>

→ static1, static2는 left, top이 무시되고 "가" 아래로 차례로 출력됨

→ relative1, relative2는 "나" 아래를 원점으로 하여 (40, 40) 위치부터 차례로 출력됨

→ absolute1, absolute2는 화면 기준으로 (100, 40) 위치에 겹쳐 출력됨

→ fixed1, fixed2는 화면 기준으로 (200, 40) 위치에 겹쳐 출력됨. ( 단, 스크롤해도 고정되어 있음 )

4 같이 보기

• CSS position absolute, fixed 차이 상세
• CSS left, top 속성
• CSS float 속성

6 참고 자료

• http://www.w3schools.com/cssref/pr_class_position.asp