html css position 정리

position: static; 기본값

 

1. position: relative  ;

상대위치 지정

 

 

2. position: fixed ; 

웹 페이지의 내비게이션 요소처럼

스크롤을 내려도 페이지의 항상 그 위치에서 따라다님

 

 

3. position: absolute;

가장 가까운 부모의 relative, fixed 우선 기준으로 위치를 잡는다.

 

(1) .green 이 기준일 때

html
<div class="red">
  <div class="green">
    <div class="blue">
    </div>
  </div>
</div>

CSS
.red{
  background-color: red;
  width: 500px;
  height: 500px;
  }
  
 .green{
  background-color: green;
  width: 300px;
  height: 300px;
  position: relative;
  top: 40px;
  left: 90px;
  }
  
 .blue{
  background-color: blue;
  width: 100px;
  height: 100px;
  
  position: absolute;
  bottom: 40px;
  right: 20px;
  }
  

-결과

.blue는 .green의 relative 된 위치를 기준으로 아래서 40px 오른쪽에서 20px 만큼

떨어진 곳에 위치하게 된다.

 

(2) .red 가 기준일 때

.red{
  background-color: red;
  width: 500px;
  height: 500px;
  position: relative;    <--- red의 position 변경
  }
  
 .green{
  background-color: green;
  width: 300px;
  height: 300px;
  }
  
 .blue{
  background-color: blue;
  width: 100px;
  height: 100px;
  
  position: absolute;
  bottom: 40px;
  right: 20px;
  }
  

.red의 포지션을 변경하면 red를 기준으로 .blue의 위치가 정해진다.

-결과

 

(3) position이 설정된 부모가 없을 때

.blue 의 부모 중 position이 relative, fixed가 없다면 body 기준으로 정해진다

.red{
  background-color: red;
  width: 500px;
  height: 500px;
  }
  
 .green{
  background-color: green;
  width: 300px;
  height: 300px;
  }
  
 .blue{
  background-color: blue;
  width: 100px;
  height: 100px;
  
  position: absolute;
  bottom: 40px;
  right: 20px;
  }

-결과