[CSS] Position 이란? (static, relative, sticky, fixed, absolute)

CSS 를 사용하면서 

종종 Position 이라는 것을 사용하게 된다.

Position 의 종류는 아래의 5가지이다.

 

1. static

2. relative

3. fixed

4. absolute

5. sticky

 

이제 Position 의 각각의 특성에 대해 알아보자.

 

 

1. Static (정적)

 

left, right, top, bottom 등의 영향을 받지 않는 것으로

 

화면의 흐름대로, 순서대로 나열된다.

 

-- Example --

static

static2

<div style="position: static; border: 1px solid blue; left: 100px;">static1</div>
<div style="position: static; border: 1px solid red; right: 100px;">static2</div>

 

 

2. relative (상대적)

 

static 과는 다르게 left, right, top, bottom 등의 영향을 받는다.

 

-- Example --

relative1

relative2

<div style="position: relative; border: 1px solid blue; left: 100px; width: 100px;">relative1</div>
<div style="position: relative; border: 1px solid blue; left: 200px; width: 100px;">relative2</div>

 

 

 

3. fixed (고정)

 

현재 보이는 viewport를 기준으로 배치된다.

 

위치를 left, right, top, bottom 등으로 지정을 해두면 스크롤을 해도 지정된 위치에 Element 를 고정시켜 둔다.

 

-- Example --

fixed1

화면의 오른쪽 아래에 고정시켜 두었다.

 

<div style="position: fixed; border: 1px solid blue; bottom: 0; right: 0;">fixed1</div>

 

 

4.  absolute (절대적)

 

static 을 제외한 부모의 위치에 상대적으로 위치한다.

만약 부모가 없다면 document body 를 기준으로하여 위치하게 된다.

 

-- Example --

absolute

 

 

<div style="position: absolute; border: 1px solid blue; left: 100px;">absolute</div>

 

 

 

5. sticky (끈적)

 

사용자의 scrolling 에 따라 relative 와 fixed 의 속성을 왔다갔다 하게 된다.

IE 와 Edge 15 이하 버전은 지원하지 않는다. stickcy 의 경우 fixed 를 할 위치를 top 등을 써서 지정을 해줘야한다.

그리고 다음 엘리먼트를 만나는동안 fixed 가 되어 있는 것이기때문에

fixed 가 될 수 있는 충분한 공간이 필요하다.

 

 

-- Example --

I am sticky!

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

<div style="height: 500px;">
	<div style="position: sticky;
    			position: -webkit-sticky; <!-- Safari -->
    		border: 1px solid blue; 
                left: 100px; 
                width: 100px; 
                top: 0;">sticky
     	</div>
</div>

 

 

위와 같이 Position 의 특성에 대해 정리해두었으니

참고하여 사용하길...