CSS Position 속성 이해하기

CSS의 핵심 Position속성 이해하기

css position

position 속성은 이해하기 조금은 어렵지만 꼭! 알아두어야 할 부분입니다.

그래서 이번 포스팅에서는 position의 설정 값에 대한 특징들에 대하여 알아보고, 설정값의 특징을 서로 비교해 가며 설명을 드려보고자 합니다.

position 속성의 4가지 설정 값

- static(정적) : 기본값으로 position이 지정되지 않은 상태와 동일 합니다.

- fixed(고정) : 화면의 절대적 위치로 설정 합니다. 위치는 top, right, bottom, left 속성을 이용합니다.

- absolute(절대) : 화면이 아닌 <body>에 의해 위치가 설정 됩니다.

- relative(상대) : <body> 안의 가장 가까운 요소에 의해 위치가 설정 됩니다.

static 과 relative 의 차이

테스트를 해 보면 static은 relative와 똑같다는 생각을 하게 됩니다.

그러나 좌표지정(top, right, bottom, left)과 함께 사용 되었을 때 그 차이를 확인 할 수 있습니다.

static는 정적 즉 좌표지정을 통해 이동시킬 수 없지만

그와 반대로 relative 는 좌표지정을 통해 이동시킬 수 있습니다.

따라서 DIV영역을 드래그하여 이동할 수 있도록 구현하기 위해서는 static 속성이 아닌 relative, absolute, fixed 속성을 사용 하게 됩니다.

absolute 와 relative의 차이

위치 속성(ex top:10px) 을 주었을 때 absolute는 <body> 로부터 10px 아래의 위치에 자리하게 됩니다.

그러나 relative의 경우는 <body> 안의 위치를 차지하는 다른 요소를 기준으로 10px 아래의 위치에 자리하게 됩니다.

absolute 및 fixed 는 위치를 차지하지 않는 요소 입니다.

그러나 relative와 static 및 텍스트 등 다른 요소들은 자리를 차지하는 요소 입니다.

absolute 와 fixed의 차이

차이를 한눈에 확인 하기 위해서는 동일한 위치로 설정하여 겹치게 하고, 스크롤이 발생하게 만듭니다.

그리고 스크롤을 이동시켜 보면 fixed는 그자리 그대로 있는 반면 absolute는 스크롤과 함께 이동하게 됩니다.

fixed는 화면(브라우저)의 절대적 위치로 적용되나 absolute는 <body>의 절대적 위치로 적용되기 때문입니다.

넓이를 지정하지 않을 경우

absolute 와 fixed는 내용 부분까지 width로 자동 설정 되나

relative 와 static은 100% 로 자동 설정 됩니다.

영역이 겹치는 경우

뒤에 코딩되어 있는 부분이 위로 올라가게 됩니다.

그러나 z-index 속성의 값이 다른 경우 속성값(숫자)이 높을 수록 위로 올라가게 됩니다.

다음 포스팅에서는 다양한 예제를 통해 보다 쉽게 이해 할 수 있도록 올려 보도록 하겠습니다.