CSS position absolute, fixed 차이 상세

1 개요

CSS position absolute 상세

CSS position absolute, fixed 차이

• position 속성이 absolute이더라도 화면에서 항상 절대적인 위치가 되는 것은 아니다.

부모의 postion 속성이 static인 경우에는 화면의 (0, 0)을 기준으로 한다.

부모의 postion 속성이 static이 아닌 경우(예: absolute, relative, fixed)에는 부모의 시작점을 기준으로 한다.

스크롤시에는 그에 맞게 이동한다.

• 반면 fixed는 부모의 속성에 상관없이 항상 화면에서 절대적인 위치가 된다.

스크롤시에도 항상 그자리이다.

2 예시

<style>
.container {
  margin-top: 50px;
  height: 80px;
  background-color: silver;
  font-size: 30px;
}
.container-static {
  position: static;
}
.container-relative {
  margin-left: 100px;
  position: relative;
}
.container-absolute {
  margin-left: 200px;
  top: 200px;
  position: absolute;
}
.container-fixed {
  margin-left: 300px;
  top: 300px;
  position: fixed;
}
.box {
  font-size: 12px;
  width: 100px; height: 40px;
}
.box-absolute {
  left: 20px; top: 20px;
  position: absolute;
  background-color: orange;
}
.box-fixed {
  left: 100px; top: 20px;
  position: fixed;
  background-color: red;
}
</style>
 
<div class='container container-static'>static
  <div class='box box-absolute'>absoulte</div>
  <div class='box box-fixed'>fixed</div>
</div>
<div class='container container-absolute'>absolute
  <div class='box box-absolute'>absolute</div>
  <div class='box box-fixed'>fixed</div>
</div>
<div class='container container-relative'>relative
  <div class='box box-absolute'>absolute</div>
  <div class='box box-fixed'>fixed</div>
</div>
<div class='container container-fixed'>fixed
  <div class='box box-absolute'>absolute</div>
  <div class='box box-fixed'>fixed</div>
</div>

→ http://zetawiki.com/ex/css/position-absolute.php

3 같이 보기

• CSS position 속성