[CSS] position 마스터하기

◾ position

1. position: fiexd;

→  스크롤을 내려도 그자리에 있음

→  top, left, right, botton 프로퍼티 중 하나만 수정해도 겹쳐짐     // 더 이상 bolck , margin 신경쓰지 않게됨

 

2. position: static;

→ 레이아웃 박스를 처음 위치하는 곳에 둠

 

3. position: relative;

→ 엘리먼트가 처음 놓인 자리에서 조금씩만 상하좌우로 옮기고 싶을 때

→

  position: relative;
  top: -10px;
  left: -10px;

 

4. position: absolute;          (사용하려면 부모 relative 사용하기)

→ 상하좌우로 옮기고 싶을 때      

→ body 맨 오른쪽, 아래 , 왼쪽으로 이동함

→ 가장 가까운 relative 부모를 기준으로 이동시켜줌  

div {
  width: 300px;
  height: 300px;
  background-color: antiquewhite;
  position: relative;
}
.green{
  height: 100px;
  width: 100px;  
  background-color: green;
  position: absolute;
  top: -10px;
  left: -10px;
}