[css] 포지션
- basic/languages
- 2019. 4. 16.
/* 아래의 값들은 대상 엘리먼트를 대상으로 지정해줘야함. 부모 엘리먼트 x */
position: relative; /* 요소들이 자유롭게 이동할 수 있게 만들어 줌. 기본 값: static */
left: 100px;
top: 100px; /* relative를 지정해줘야 동작함. 부모 엘리먼트를 기준으로 움직임 */
position: absolute; /* 위치를 absolute로 정해주면 더 이상 부모의 소속이 아니기 때문에, 자식이 차지하고 있는 공간도 없어짐.*/
/*
position의 값을 absolute로 주면, 부모 또는 부모의 부모 등 계속해서 상위 엘리먼트로 가면서
position이 static이 아닌 엘리먼트를 기준으로 위치를 계산함.
*/
position: fixed; /* absolute와 유사하나, scroll에 무관하게 화면에 고정됨.
만약 top에 고정시킨다면, 다른 엘리먼트들은 margin-top으로 같은 크기 만큼 설정해줘야함. */
'basic > languages' 카테고리의 다른 글
[css] css에서 다른 css 불러오기: import (0) | 2019.04.16 |
---|---|
[css] text-alignment: justify 양쪽 균등 분배 (0) | 2019.04.16 |
[css] 마진 겹침 현상 (0) | 2019.04.16 |
[css] inline 방식에서는 width, height 값이 무시됨 (0) | 2019.04.16 |
[css] inline vs block (0) | 2019.04.16 |