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 사용
profile
안녕하세요. 우주먼지입니다.

0개의 댓글