[HTML+CSS] Position

Position

CSS를 이용하여 문서상의 요소를 배치하는 방법, Top, Bottom, Right, Left를 통해 요소의 위치 결정

 

 

Position 속성

static : 기준없음 (배치 불가능/기본값)

relative : 요소 자기 자신을 기준으로 배치

absolute : 부모 요소를 기준으로 배치

fixed : 뷰포트 기준으로 배치

stickey : 스크롤 영역 기준으로 배치

 

예시

먼저 HTML로 부모상자와 자식상자를 만든다. 그리고 CSS로 부모상자와 자식상자의 특징을 생성한다.

부모 상자의 크기는 200px의 검은색 줄 정사각형, 자식상자는 80px 파란색 줄 정사각형

position : relative;를 통해 부모상자가 기준이 되게 한다. 그리고 자식상자는 absolute로

부모 요소를 기준으로 배치하게끔 만들었다. 그리고 bottom: 0을 설정해보면

 

 

 

이런식으로 자식상자가 부모상자의 밑부분에 붙어있게 하였다. 

bottom: 0;은 자식상자의 밑변과, 부모상자의 밑변의 거리

만약 bottom: 10px;으로 설정했다면 부모상자의 밑변과 자식상자의 밑변은 10px만큼 떨어지게 된다.