[입문] 웹 프론트 엔드 - 4주차 - position layout

by Lovefield

CSS /

position layout

css position layout 입니다.

주로 모달 팝업을 띄울때 많이 사용하게 되는 녀석입니다.

float와 달리 부모를 기준으로 띄우는 개념이라 스티커처럼 생각하시면 쉽습니다.

사용하는 값은 아래와 같습니다.

.class{position:relative | absolute | fixed | static}

static 선언을 제외한 속성에서 top, bottom, left, right 속성을 사용할 수 있습니다.

  • relative
    부모가 되는 속성이며 자기 자신을 기준으로 위치를 잡습니다.

  • absolute
    자식이 되는 속성이며 부모로 relative, absolute, fixed 를 삼습니다.
    부모를 기준으로 위치를 잡습니다.

  • fixed
    브라우저 창을 기준으로 위치를 잡습니다.

  • static
    position 속성을 더이상 사용하지 않습니다.

Author

Lovefield

Lovefield

Web Front-End developer

하고싶은게 많고, 나만의 서비스를 만들고 싶은 변태스러운 개발자입니다.

로그인

디코에 오신 것을 환영해요!
전문가들의 수많은 아티클 창고 🤓