position 프로퍼티
- css에서 position 프로퍼티를 사용하는 이유 : html코드와 상관없이 태그; 엘레먼트의 위치 조절이 가능합니다. 레이아웃을 구성할 중요한 요소 입니다.
position 프로퍼티 종류
- position: static;
- position: relative;
- position: absolute;
- position: fixed;
static;
기본값(정적인 위치)임으로 별도의 움직임이 없습니다 - position과 관련된 설정이 없는 상태
relative;
top,right,bottom,left 프로퍼티가 있어야 원위치/부모의 엘리먼트 아래에서 상 대적으로 이동이 가능합니다.
.relative {
position: relative;
}
absolute;
절대적인 position으로 이동이 가능합니다.
position에 absolute를 설정하는 순간 html에서 더이상 부모태그를 따르지 않습니다.
다만, css에 프로퍼티작성후 top, left와 같은 프로퍼티 설정이 없을경우, 부모태그의 기준아래
있어야할 원위치에 위치합니다. (But 부모의 css 속성은 따르지 않음)
그래서 직접 offset값(top, left 등) 직접 추가해야합니다. (부모가 자식을 모른척함)
.absolute {
position: absolute;
}
다른 경우, 부모의 태그에 position 프로퍼티(relative, fixed, absolute)가 있을 때,
부모태그를 잘 따릅니다.
예) 부모태그에 position 설정이 없더라고 조부모태그에 설정이있다면, 부모는 무시하고 조부모를 따릅니다.
fixed;
스크롤 로부터 완전히 독립되어 고정시키는 설정입니다.
absolute와 비슷한 성질: 부모의 css속성을 따르지 않기 때문에 offset을 추가해야 합니다.
