[css] 포지션

/* 아래의 값들은 대상 엘리먼트를 대상으로 지정해줘야함. 부모 엘리먼트 x */
position: relative; /* 요소들이 자유롭게 이동할 수 있게 만들어 줌. 기본 값: static */
left: 100px;
top: 100px; /* relative를 지정해줘야 동작함. 부모 엘리먼트를 기준으로 움직임 */

position: absolute; /* 위치를 absolute로 정해주면 더 이상 부모의 소속이 아니기 때문에, 자식이 차지하고 있는 공간도 없어짐.*/

/*
position의 값을 absolute로 주면, 부모 또는 부모의 부모 등 계속해서 상위 엘리먼트로 가면서
position이 static이 아닌 엘리먼트를 기준으로 위치를 계산함.
*/

position: fixed; /* absolute와 유사하나, scroll에 무관하게 화면에 고정됨. 
만약 top에 고정시킨다면, 다른 엘리먼트들은 margin-top으로 같은 크기 만큼 설정해줘야함. */

댓글

Designed by JB FACTORY