position 속성

16기 김동하·2020년 12월 16일
1

Layout

모던한 웹 페이지는 style과 layout을 담당하는 CSS를 사용하여 layout을 구성하는 것이 바람직하다.
layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.

rel: (https://poiemaweb.com/css3-layout)

1. position 속성

static, relative, absolute, fixed, sticky

position 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.

static (기본위치)

static은 position 속성의 기본값이다. 요소를 나열한 순서대로 배치하며 top, right, bottom, left와 같은 속성을 사용할 수 없다. (float 속성은 가능!)

relative

static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값이다.

예시 (static, relative)

position: static (기본값)
static 속성은 보통 display 속성에 따라 배치가 결정된다.
위의 요소들은 display: inline-block 에 따라 왼쪽에서 오른쪽으로 요소의 위치가 결정된 걸 볼 수 있다.


position: relative
static 이었을 때 어느 위치였는지를 기준으로 상대적인 요소의 위치를 결정한다.
위 그림에서는 파란색 요소가 원래 static 위치를 기준으로 위에서 30px, 오른쪽에서 150px 떨어진 것을 알 수 있다.

예시 (absolute)

position: absolute
absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값이다.

이때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소이다.

빨간색 요소 box1는 position: relative 이기 때문에 원래 static 이었을 때의 자리로부터 위로부터 100px, 왼쪽으로부터 100px 떨어져 있는 모습을 볼 수 있다.

반면에 파란색 요소 box2는 position: absolute이기 때문에 브라우저 왼쪽 상단 기준 위로부터 100px, 왼쪽으로부터 100px 떨어져 있는 모습을 볼 수 있다.

예시 (fixed, sticky)

position: fixed
부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다.

스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

postion:sticky
sticky 속성은 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작한다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게 된다.


fixed 와 sticky 요소를 혼합한 예제이다.
스크롤를 내리면 fixed 요소는 브라우저 특정 위치에 그대로 있는 반면에 sticky요소는 특정 시점에서 fixed 요소처럼 행동하다 자신의 부모 요소와 만나게 되면 멈추는 모습을 볼 수 있다.

sticky 요소가 중간에 멈추는 기준은 부모 요소의 크기 내에서 멈추게 됩니다. sticky 요소는 부모 요소 정확히 override: hidden 이 아닌 요소의 크기 밖으로 나갈 수 없다.

rel: https://engkimbs.tistory.com/922

profile
예비 개발자에서 개발자로!

0개의 댓글