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>

→ (static) A1, A2는 left, top이 무시되고 "가" 아래로 차례로 출력됨

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

→ (absolute) C2는 화면 기준으로 (100, 40) 위치에 출력됨

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

→ 예제: http://jmnote.com/css/position.php

4 같이 보기

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

6 참고 자료

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