CSS position 요소의 위치정의

CSS position 요소의 위치정의

각 요소들과 객체들을 코딩하다보면 position을 적절히 잘 사용해야 할 때가 많습니다.

일단 어떠한 속성들이 있는지 먼저 보겠습니다.

position

static - 기본값으로 순서그대로 표현이 됩니다.

absolute - 정적인 요소가 아닌 상대적으로 배치가 됩니다. 마치 레이어처럼 혼자 떠다니는 요소가 됩니다.

relative - 상대적으로 배치되면서 CSS의 영향을 받습니다.

fixed - 브라우저에 영향을 받으며 크기에 상관없이 위치가 고정이됩니다.

inherit - 부모요소에서 영향을 받습니다. 부모요소 그대로 css의 영향을 받습니다.

포지션css의 중요 핵심 포인트는 3가지 정도입니다. absolute, relative, fixed입니다.

absolute는 디자인에서의 새로운 레이어를 생성한것과 같다고 생각하시면 됩니다.

예를 들어 다음과 같습니다.

같은 영역 안에 두가지 요소를 넣고 싶을 때 absolute를 사용하면 두가지 정보를 쉽게 표시 할 수 있습니다. 할인율이라던지 hot 아이콘이라던지 사용하기엔 많겠죠.

상대적인 요소안에 넣지 않고 따로 absolute를 적용한다면 원하는 위치, 원하는 자리에 가지 않습니다. 부모영역을 확실히 정해줘야 합니다. 따라서 relative안에 자식영역을 absolute 시켜주면 위와같이 됩니다.

<style>

div {position:relative}

p {position:absolute; top:10px; left:10px}

</style>

<div>

 <p>absolute</p>

 relative

</div>

fixed는 고정하는 메뉴부분에 많이 사용합니다. 상단메뉴 또는 좌측메뉴 (GNB, SNB)에 스크롤 시에 브라우저의 위치에 맞게 고정시켜줍니다.

<style>

div {position:fixed; top:0; left:0; width:100%; height:100px; background:#f00}

</style>

<div>

 <p>고정메뉴,fixed<p>

</div>

css에서의 포지션은 상당히 중요한 역활을 합니다. 이부분은 많은 연습과 테스트로 인하여 어떠한 경우에 어떤 속성을 쓰는지 파악하시면 더욱 다양한 사이트를 만드실 수 있습니다.