[CSS] position 속성에 대해 알아보자.

CSS, position 속성에 대해 알아보자.

CSS property 중에 position 값에 relative 라는 녀석을 만나게 되었다.

이 녀석은 뭐하는 녀석일까? 궁금해하다 position 속성 자체에 대해 공부하게 되었다.

position 값에 들어갈 수 있는 값은 static, absolute, relative, fixed, inherit 이다.

position:static

static 값은 기본값이기 때문에 position 값을 써주지 않으면, 자동으로 static position이 된다.

이 static position은, 화면의 왼쪽상단부터 element 들을 배치한다.

최초 element는 최좌상단에, 그리고 그 다음 element 는 그 오른쪽에 붙는데 만약 공간이 부족하다거나, block element 가 오게 되면, 그 아래쪽으로 element를 배치한다.

이 static position 은 순전히 컴퓨터 계산만 따르는 것으로, left, top, right, bottom 값이 먹지 않는다.

만약 left, top 등의 값을 assign 하고 싶다면, position:absolute 나 position:relative 등을 사용해야 한다.

position:absolute

absolute 는 절대값을 이야기하는데, 주의할 점은 parent tag 의 좌상단 위치를 기준점으로 절대값으로 배치한다. 즉 아래와 같은 코드를 사용하면,

<div style="position:absolute; left:30px; top:30px; border:solid; width:100px; height:100px">

<a href="#" style="position:absolute; left:5px; top:10px">감자</a>

</div>

absolute 는 절대좌표지만, 부모가 static 이 아니면 부모의 좌상단 기준 절대좌표가 된다.

위의 그림과 같이, parent 인 div tag 를 기준으로 감자라는 앵커태그가 배치된다.

감자 앵커태그는 left:5px, top:10px 의 위치값을 가지고 있지만, 이는 parent 에 상대적인 절대값으로, window 기준으로는 left:15px, top:25px 위치에 위치하게 된다.

Combination of position:absolute & other position

Element의 position:absolute 일 경우 parent element의 position에 따라 2가지 형태로 적용이 된다.

1. parent 가 position:static인 경우는 document 기준으로 절대위치를 갖게 된다.

2. parent 가 position:static이 아닌 경우는 parent 의 원점(좌상단)을 기준으로 절대위치를 갖게 된다.

<div style="border:solid; width:100px; height:100px;"></div>

<div style="border:solid; width:200px; height:200px;">

<a href="#" style="position:absolute; left:10px; top:10px;">감자</a>

</div>

부모의 position이 static 인 경우에는 자식은 document를 기준으로 절대좌표를 유지한다.

position:relative

relative 는 상대적인 위치를 나타내는데, 이 녀석은 static 값 위치 기준의 상대적인 좌표를 나타낸다.

만약 아래와 같은 코드를 사용하면,

<div style="width:100px; height:100px; border:solid;">

</div>

<div style="position:relative; left:10px; top:10px; border:solid; width:50px; height:50px;">

</div>

relative 는 본래 static 좌표에 대해 상대적인 좌표!

위의 그림과 같이 두번째 div box 는 document 의 좌상단이 아닌, 원래 자신이 있어야 할 위치(static 기준)를 기준으로 위치가 정해진다. 두번째 div box의 위치값은 left 10px, top 10px 지만, window 기준으로 left 10px, top 110px 위치에서 박스를 그리게 된다. 본래 자신의 위치(static 값)은 ( 0, 100 ) 이기 때문이다. ( 여기서 100은 첫번째 box 의 높이(height) 값 )

position:fixed

position:fixed 인 경우는 scroll 여부와 상관없이, window 화면 절대좌표를 이용하여 배치한다. 즉, 만약 left:100px, top:100px 값이 적용되었다면, 화면이 스크롤되어도 화면 좌상단을 기준으로 (100, 100) 에 계속 위치하게 되는 것이다. 

Absolute, Bottom, css, CSS3, document, ELEMENT, example code, fixed, Inherit, Left, parent element, parent tag, Position, position:absolute, position:fixed, position:inherit, position:relative, position:static, relative, Right, Sample Code, scroll, static, Top, window, 기본값, 상대 좌표, 상대값, 상대좌표, 샘플 코드, 스크롤, 예제 코드, 위치 지정, 절대 좌표, 절대값, 절대좌표, 좌표