CSS - Position

박도겸·2022년 4월 19일

CSS front end

Position

: position 이란, 웹 페이지에서 html 태그나 id, class 박스 등의 위치를 지정해 주는 속성이다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있다.

x축으로는 right: ; 와 left: ; 값으로 이동할 수 있으며,
y축으로는 top: ; 와 bottom: ; 값으로 이동할 수 있다.

Position 종류

position: static;

: 기본적으로 모든 태그들은 position 속성 값을 주지 않으면 position: static; 값을 가진다.

즉, html에 쓴 태그 순으로 위치가 지정되게 된다. 그래서 굳이 기입할 필요는 없지만, 부모 객체에서 다른 position 속성 값이 주어졌을 때, 이를 무시하기 위해 사용될 때가 있다.

위의 코드처럼 top ,bottom, right, left 에 어떤 값을 주어도 움직이지 않는다.
position: relative;

: 단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있다.
즉, 원래 자신이 있어야 하는 위치(static)에 상대적이다.
그래서 position: relative; 라는 값을 주고 left : 100px; 이라는 값을 주면, 본인의 static 자리에서 왼쪽으로 100px만큼 떨어진 자리에 위치하게 된다.
position: absolute;

: position: absolute; 라고 한 뒤 top : 100px; left: 100px; 이라고 값을 주면, 왼쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 볼 수 있다.
position: absolute; 는 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 된다.

하지만, position: absolute; 를 감싸는 부모 요소(container)에 relative, absolute, fixed 같은 position: ; 속성이 있다면, absolute 는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 된다.
position: fixed;

: 스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않게 하기 위해 position: fixed; 속성을 이용한다.

fixed 는 현재 사용자가 보고 있는 뷰포트를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치한다.

많은 사이트들이 페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성이다.

참고로 sticky 와 달리 상단에 붙는 것이 아니며 설정한 그 위치를 유지한다.
position: sticky;

: position: sticky; 는 fixed 와 유사하지만, 부모 요소를 기준으로 붙는다는 개념이다.

또한, 형제 요소가 있다면, 그 영역 위로 침범하지 않아 웹 페이지 상단에 로고가 있는 네비게이션에 사용하기 용이하다.