본문 바로가기
CSS

[CSS] position 속성 static, relative, absolute, fixed 정리

by 메이플 🍁 2022. 4. 25.

position

position 속성은 요소의 위치 지정 기준을 설정한다. position에는 5가지 값(static, relative, fixed, absolute, sticky)이 있는데 static은 default 값으로 요소의 위치 지정 기준이 없어 위치 설정을 할 수가 없다. position 값이 설정되면 top, bottom, left, right의 속성으로 요소의 위치를 이동시킬 수 있다.

position의 속성 

  • static: 요소의 위치 지정 기준이 없다 (default)
  • relative: 자신을 기준으로 요소의 위치를 설정한다
  • absolute: 위치상 부모 요소를 기준으로 요소의 위치를 설정한다
  • fixed: 브라우저의 뷰포트를 기준으로 요소의 위치를 설정한다

position 사용시 주의점

position 속성으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경된다

position과 같이 사용하는 CSS 속성

양수와 음수를 모두 포함한 숫자값을 입력할 수 있다

  • top, bottom, left, right: 요소의 각 방향별 거리를 지정하는 속성
  • z-index: 요소의 위아래 배치를 지정하는 속성

 

position의 속성 3가지(relative, absolute, fixed) 상세 설명

1. relative

position 값에 relative 라는 속성을 부여하면:

  • 요소가 자신을 기준으로 위치를 이동한다
  • 요소가 있던 자리는 매꿔지지 않는다 (다른 요소가 차지할 수 없다)
  • position: relative 속성값은 단독으로 잘 사용하지 않고 position: absolute 속성값을 가진 요소의 기준을 줄 때 사용한다

 

예시

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 3px dashed tomato;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: SandyBrown;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  background-color: orange;
  position: relative;
  top: 30px;
  left: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
  background-color: DarkOrange;
}

 

2. absolute

position 값에 absolute 라는 속성을 부여하면:

  • 위치상 부모요소를 기준으로 위치를 이동하기 때문에 기준으로 삼고 싶은 부모 또는 조상 요소에 position: relative 속성을 부여해준다
  • 해당 요소가 position: relatvie라는 속성값을 가진 부모 요소를 기준으로 위치를 이동한다
  • position: relatvie라는 속성값을 가진 부모 요소가 없다면 position: relatvie라는 속성값을 가진 가장 가까운 조상 요소를 기준으로 위치를 이동한다
  • position: relatvie라는 속성값을 가진 부모, 조상 요소가 없다면 브라우저의 뷰포트를 기준으로 위치를 이동한다
  • 공중에 붕 뜨게 되면서 z-index값을 가지게 된다

 

예시

1) 부모 요소를 기준으로 위치를 이동

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 3px dashed tomato;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: SandyBrown;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  background-color: orange;
  position: absolute;
  top: 30px;
  left: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
  background-color: DarkOrange;
}

 

2) 가장 가까운 조상 요소를 기준으로 위치를 이동

<div class="wrapper">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>​
.wrapper {
  width: 500px;
  height: 300px;
  background-color: Lavender;
  position: relative;
}
.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 3px dashed tomato;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: SandyBrown;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  background-color: orange;
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
  background-color: DarkOrange;
}

 

3) 브라우저의 뷰포트를 기준으로 위치를 이동

<div class="wrapper">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>​
.wrapper {
  width: 500px;
  height: 300px;
  background-color: Lavender;
}
.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 3px dashed tomato;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: SandyBrown;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  background-color: orange;
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
  background-color: DarkOrange;
}

 

3. fixed

position 값에 fixed 라는 속성을 부여하면:

  • 브라우저의 뷰포트를 기준으로 요소의 위치를 설정한다
  • 공중에 붕 뜨게 되면서 z-index값을 가지게 된다
  • 위치가 고정되기 때문에 화면의 길이가 길어 스크롤이 되면서 아래로 내려가도 요소는 뷰포트를 기준으로 지정한 위치에 그대로 있다

 

예시

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
body {
  height: 1000px;
}
.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 3px dashed tomato;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: SandyBrown;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  background-color: orange;
  position: fixed;
  bottom: 30px;
  right: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
  background-color: DarkOrange;
}

 

z-index

z-index는 요소의 쌓임 순서(stack order)를 결정하는 속성으로 position 속성값 relative, absolute, fixed 값을 부여받으면 요소가 위아래로 배치되는 z-index 값이 생긴다. z-index의 숫자가 높을수록 가장 상단에 배치되며 숫자가 낮을수록 하단에 배치된다. 

z-index 속성값

  • auto: 부모 요소와 동일한 쌓임 정도를 의미하며 default값이다
  • 숫자: 숫자가 높을 수록 위에 쌓이며 음수 양수의 숫자 모두를 사용해 요소의 위아래를 배치할 수 있다

z-index의 요소 쌓임 순서

  1. 요소에 position 속성의 값이 잇는 경우 위에 쌓인다 (static 제외한 posittion의 속성을 가지고 있는 요소)
  2. 1번 조건이 같은 경우 z-index 속성의 숫자 값이 높을수록 위에 쌓인다
  3. 1번과 2번 조건까지 같은 경우 HTML의 다음 구조일수록 위에 쌓인다.

 

예시

1) z-index 값이 없을 경우

position 속성이 있는 item 1, 2만 z-index의 기본값 auto를 가지게 되고 HTML 가장 다음 구조인 2가 1보다 위에 쌓인다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 3px dashed tomato;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: SandyBrown;
  position: relative;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  background-color: orange;
  position: absolute;
  top: 30px;
  left: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
  background-color: DarkOrange;
}

 

2) z-index 값이 있을 경우

z-index 값이 높을 수록 위에 배치가 되기 때문에 item 1이 가장 위에 있다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  border: 3px dashed tomato;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: SandyBrown;
  position: relative;
  z-index: 1;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  background-color: orange;
  position: absolute;
  top: 30px;
  left: 30px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
  background-color: DarkOrange;
}

'CSS' 카테고리의 다른 글

[CSS] transform, keyframes로 애니메이션 효과 주기  (0) 2022.05.10
[CSS] flex 속성 정리  (0) 2022.05.04
[CSS] inline-block의 문제점과 해결방법 (태그사이의 공백과 baseline)  (0) 2022.04.24
[CSS/한줄정리] tabindex 속성으로 focus가 될 수 있는 요소 만들기  (0) 2022.04.24
[CSS] display 속성 inline, block, inline-block 정리  (0) 2022.04.24

관련글

댓글

티스토리툴바