position

position : 위치를 아주 조금 옮기고 싶을 때 사용

position: fixed;

• position: fixed; 레이아웃 상에서 그려진 초기 위치에 고정
• top, left, right, bottom이라는 property 중 하나만 수정해도 block, margin 신경쓰지 않음.
• 가장 위에 있는 다른 레이어로 넘어감.

*opacity: 숫자; 투명도 조절하는 property

position: static;

• 레이아웃이 박스를 처음 위치하는 곳에 두는 것으로 디폴트 값임.

position: relative;

• element가 처음 위치한 곳을 기준으로 수정
• top, left, right, bottom 사용

  .green {
    background-color: teal;
    height: 100px;
    width: 100px;
    position: relative;
    top: -10px;
    }

position: absolute;

• 부모, 조상이 모두 static인 경우, document body를 기준으로 위치
  -> 부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있음.
• 부모를 기준으로 이동시키고 싶다면 부모element에 position: relative; 필요
• top, left, right, bottom 사용