"CSS position 속성"의 두 판 사이의 차이

4번째 줄: 4번째 줄:


==값 목록==
==값 목록==
*static: 위에서 아래로 순서대로 배치됨.top, left 지정 무시됨.
*static: 위에서 아래로 순서대로 배치됨.top, left 지정 무시됨(기본값★)
*relative: 상대적인 위치
*relative: 상대적인 위치
*absolute: 절대적인 위치
*absolute: 절대적인 위치

2014년 11월 26일 (수) 11:16 판

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) 위치에 출력됨[1]
→ (fixed) D2는 화면 기준으로 (200, 40) 위치에 출력됨. 단, 스크롤해도 고정되어 있음[2]
→ 예제: http://jmnote.com/css/position.php

4 같이 보기

5 주석

  1. C1은 C2 아래에 겹쳐 있어서 보이지 않음
  2. D1은 D2 아래에 겹쳐 있어서 보이지 않음

6 참고 자료

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}