CSS position

leejaell·2022년 9월 1일

HTML/CSS

목록 보기

4/7

position은 쓸 때마다 이게 '왜 여기있지..' 라는 생각이 든다. 기초부터 CSS를 다지고 있으니 이번 기회에 position에 대해서 다시 공부해보기로 했다.

개념을 공부할 땐 공식문서부터 보는 것이 좋다고 배웠으니 공식문서로 가보자🚶
이곳에서 CSS position layout module Level 3를 확인해보자.
https://www.w3.org/TR/css-position-3/

Choosing A Positioning Scheme: position property

position에는 static, relative, absolute, sticky, fixed 총 5개의 값을 가지고 있다.
기본 값은 static이며, 상속을 받지 않는 속성이다.
static 속성 이외의 값은 절대 위치를 설정하도록 한다. (Normal Flow에서 벗어난다는 의미)

🤔 static, relative, absolute, sticky, fixed가 정확히 무엇일까?

static

The box is not a positioned box, and is laid out according to the rules of its parent formatting context. The inset properties do not apply.

여기서 말하는 inset properties가 무엇일까?

삽입 속성으로 box가 위치 조정이 가능할 때 (즉, static 상태가 아닐 때) top, bottom, left, right를 말한다.

relative

The box is laid out as for static, then offset from the resulting position. This offsetting is a purely visual effect, and does not affect the size or position of any other box, except insofar as it increases the scrollable overflow area of its ancestors. This positioning scheme is called relative positioning.

relative는 static처럼 배치되며, 다른 박스의 크기나 위치에 영향을 주지 않는다.

absolute

The box is taken out of flow such that it has no impact on the size or position of its siblings and ancestors, and does not participate in its parent’s formatting context.
Instead, the box is positioned and sized solely in reference to its absolute positioning containing block, as modified by the box’s inset properties, see § 4 Absolute Positioning Layout Model. It can overlap in-flow content or other absolutely positioned elements, and is included in the scrollable overflow area of the box that generates is containing block. This positioning scheme is called absolute positioning.

형제나 조상 요소의 크기나 위치에 영향을 미치지 않고 flow에서 벗어난다.
상자의 삽입 속성에 따라 absolute positioning containing block을 기준으로 상자의 위치와 크기가 조정된다.
단, 조상 중 위치 지정 요소가 없다면 initial containing block(html)을 기준으로 삼는다.

containing block

: 하나의 box가 위치할 때 box를 포함하고 있는 block을 의미

sticky

가장 가까운 조상 스크롤 컨테이너 스크롤포트를 참조하여 자동으로 오프셋이 조정된다는 점에서 relative와 차이가 있다.

fixed

absolute와 비슷하다.
fixed positioning containing block을 기준으로 위치가 지정되고 스크롤 할때에도 움직이지 않는다.

Definition of "containing block"

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.

initial containing block은 root element

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

element의 position이 relative 혹은 static 이라면? : containg block은 가장 가까운 block container 가장 자리에 의해 형성된다.

If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.

position이 fixed인 경우 :연속 미디어의 경우 뷰포트에 의해 결정되고, 페이지 미디어인 경우 페이지 영역에 의해 결정된다.

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
a. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
b. Otherwise, the containing block is formed by the padding edge of the ancestor.

position이 absolute인 경우 : containing block은 position이 'absolute', 'relative' or 'fixed'인 가장 가까운 조상으로 설정된다.
조상이 inline인 경우: inline box가 가지고 있는 패딩 주변의 경계상자에 의해 형성된다.
조상이 inline이 아닌 경우: 패딩 가장자리에 의해 형성된다.

문서를 잘 이해하지 못한것 같아서 컨테이닝 블록이 inline요소인 경우와 block 요소인 경우 두 가지를 만들어보았다. 그 결과 inline요소가 relative인 경우에는 텍스트 라인에 맞춰서 움직이는 것을 확인할 수 있었고 block 요소인 경우에는 padding 모서리 라인에 맞춰서 움직이는 것을 확인할 수 있었다.