CSS - Position

Position

CSS의 Position이란 속성은 문서 상에 요소를 배치 하는 것을 말한다 !
단어 그대로 어디에 배치를 할 지에 대해 top, bottom, left, right 속성으로 어떤 포지션에
둘 것 인가를 정할 수가 있다

.test {
	position: 속성
}

static

Static은 기본 값으로 position을 설정하기 전 값과 같다.
top, right, bottom, left, z-index등 속성들이 아무런 영향을 주지 않는다.

.test {
	position: static
}

relative

top, right, bottom, left등 속성을 이용해 위치 조절이 상대적으로 가능하다

.test {
	position: relative;
    top: 20px;
    left: 20px;
}

absolute

absolute 값을 주게 되며 일반적으로 문서 흐름상에서 제외가 되며 페이지 레이아웃 또한
공간 배정을 하지 않는다. 하지만 자신의 부모태그중 위치 지정 요소가 없다면 맨 처음 컨테이너 블록을
기준으로 삼는다
즉 내가 원하는 곳에 top right bottom left 값을 주어서 틀에 영향을 받지 않고 위치를 지정할 수 있는
absolute를 사용하기 위해선 부모태그에 position: relative를 주어야 한다. 그러지 않는 다면 body 기준으로 삼을 수도 있다.
또한 absolute 상태가 되면 div여도 더는 width: 100%가 아니게 된다.

.parent {
	position: relative
}

.child {
	position: absolute;
    top: 20px;
    left: 20px;
}

fixed

fixed는 position중 굉장히 많이 쓰이며
주로 상단메뉴 사이드메뉴등 스크롤을 내려도 웹페이지 상 고정으로 표시가 되는 곳을 만들게 해준다.
fixed 또한 absolute처럼 더는 div가 width: 100%가 아니게 된다!

.test {
	position: fixed;
}