CSS - position 속성

positon 은 나열된 정적인 요소의 틀을 벗어나 원하는 위치에 다른 요소와 함께 배치시킬 수 있습니다.

값	설 명
static	기본적으로 모든 태그들은 static 상태임. 기본 값. float 속성을 이용해 배치할 수 있지만 left, right, top, bottom 속성을 사용할 수 없음.
absolute	위치가 설정된 상위의 조상요소를 기준으로 위치를 지정하며, 조상요소가 없다면 BODY 요소를 기준으로 위치를 설정함.
relative	나열된 요소의 원래 있던 위치가 기준이 되며 top, left, right, bottom 속성을 사용해 배치함.
fixed	브라우저 창의 너비와 관계없이 항상 문서를 지정한 위치에 고정함. 왼쪽 상단을 기준으로 좌표를 지정.

absolute 속성

<style>
.hh1 {
  position: relative;
  width: 150px;
  height: 150px;
  border: 1px solid #000;
}
.hh2 {
  position: absolute;
  top: 50px;
  right: 0;
  width: 90px;
  height: 90px;
  border: 1px solid #000;
  background: #efefef;
}
</style>

<div class="hh1">relative
  <div class="hh2">하보니 PHP</div>
</div>

relative

하보니 PHP

relative 속성

요소의 원래 있던 위치에서 top 과 left 로 위치를 조정하였습니다.

<style>
div.hh1 {
  float: left;
  width: 100px;
  height: 100px;
  background: yellow;
  margin-right: 10px;
  border: 1px solid #000;
}
div.hh2 {
  position: relative;
  float: left;
  top: 50px;
  left: -30px;
  width: 100px;
  background: #efefef;
  border: 1px solid #000;
}
</style>

<div class="hh1">블록</div>
<div class="hh2">하보니 PHP</div>

블록

하보니 PHP

fixed 속성

요소를 브라우저 창 왼쪽 상단에 위치하도록 고정합니다.

<style>
.hh1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
  background: red;
  color: white;
}
</style>

<div class="hh1">하보니 PHP</div>

하보니 PHP