Position
1. relative
1) block, inline, inline-block
HTML elements 는 기본적으로 block, inline, 그리고 inline-block level로 나뉜다. block 요소는 생성될 때 마다 새로운 줄에서 시작한다. 반면에, inline 요소는 같은 줄에서 나열되도록 만들어 진다. span, a, img 등이 대표적이다.
대표적인 block 요소를 만드는 tag는 div, p 가 있다.
inline - block 은 이 둘의 속성을 동시에 가지고 있는 것이고 inline 요소에 inline-block 속성을 부여해서 layout을 수행한다. inline 속성은 padding, border, margin 을 갖지 않고 있는데, 여기에 block을 적용하여 inline-block 으로 만들면 해당 속성들의 값을 부여할 수 있게 되기 때문이다.
2) normal-flow
css는 기본적으로 HTML elements 를 css box로 취급한다. 이것을 css box model 이라고 부른다. 위에서 얘기한 요소들이 기본적으로 block 이나 inline 속성을 갖고 페이지 위에서 부터 아래로 자연스럽게 위치하는 흐름을 normal-flow 라고 한다. css는 이 요소들을 box 로 취급하면서 이 흐름에서 벗어나, 요소들을 자유자재로 움직이게 할 수 있다.
대표적으로 한 요소에 postion 값을 relative 로 설정하고 box 에 해당하는 offset values (top, right, bottom, left) 를 조정해서 페이지에서 요소의 위치를 움직일 수 있다. relative 는 해당 요소가 원래 흐름에서 위치 했던 자리에 대하여 위치를 조정한다는 의미를 가지고 있는 것이다. 예를 들면, relative positioned 요소에 top: 50px 값을 부여하면, 원래 있던 위치에서 50px 밑으로 요소가 이동하게 된다. 이 때, 다른 요소들은 해당 요소가 기본 흐름에서 아직 똑같은 위치에 있는 것처럼 행동한다.
2. Absoulte
처음에 position: absoulte 속성을 이해하기 힘들었다. absoulte 의 의미와 요소가 움직이는 특성이 매치가 잘 안되었기 때문이다. 이게 왜 absoulte 일 까? 라는 생각을 많이 했다. 지금도 이름을 다르게 하는게 더 이해하기 편할 것 같다는 생각을 한다.
아무튼.. absoulte property 가 relative 와 가장 큰 다른 점은 해당 값을 받은 요소는 HTML normal-flow 에서 제거된다는 것이다!! 다른 요소들은 해당 요소가 마치 normal-flow 에 존재하지 않는 것처럼 행동한다. 그래서 다른 요소와 겹치게 나타날 수도 있는 것이다. 비유적으로, position property (static 제외)가 부여된 조상 요소에 대해서 '잠긴다(locked)' 라고 표현되기도 한다. aboulte 요소는 position 값을 부여 받은 조상 요소에 잠기기 때문에 offset values 들이 그 조상 요소 기준으로 absoulte 요소를 움직인다.
<div>
<ol>
<li>1번</li>
<li>2번</li>
<li>3번</li>
<ol>
</div>
// 보기편하게 아래에 둠
<style>
ol {
position: relative;
}
li: last-child {
position: absoulte;
top: 10px;
}
</style>위에 pseudo-code 의 설정에 따르면 li 마지막 요소는 부모 ol 에 잠기기 때문에, ol 요소를 기준으로 밑으로 10px 만큼 이동한다. 이 때, li margin 값에 따라서 1번 li와 겹치거나 그렇지 않을 수 있다.
만약에 ol 이 아니라 그 부모 요소인 div 에 position: relative 값이 부여된다면 3번 li 는 div 요소에 잠기게 되고 div 요소 위치 기준으로 움직이게 된다. li가 ol을 벗어나서 div 요소를 기준으로 움직일 수 있다!
3. Fixed
fixed 는 absoulte 의 한 종류이지만 viewport, 즉 사용자가 보는 브라우저 화면 전체에 요소가 잠기게 된다.
Float
float 은 text 를 감싸는 이미지를 위해 주로 사용된다. flex 이전에 layout 을 잡는데 많이 사용되었다. 그런데, float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나는 경우가 있다. 적용할 수 있는 간단한 방법으로 float 요소 container tag 에 .clearfix 클래스를 추가하고 overflow: hidden 값을 부여 하는 것이 있다.
최근에는 flex와 grid를 이용해서 layout을 많이 잡기 때문에 float 자주 사용하지는 않는다.
