CSS 위치 지정 레이아웃 모듈 레벨 3

1. 소개

이 섹션은 규범적이지 않습니다.

CSS 레이아웃 알고리즘은 기본적으로 박스들을 서로 겹치지 않도록 크기와 위치를 결정합니다.

이 명세는 필요할 때 이러한 기본 조건을 위반하는 몇 가지 방법을 정의하여, 요소들이 다른 콘텐츠와 겹칠 수 있도록 이동시킵니다:

• 상대 위치 지정은 박스를 배치된 위치로부터 시각적으로 이동시킵니다.

• 스티키 위치 지정은 박스를 배치된 위치로부터 시각적으로 이동시켜 스크롤 가능한 상위 요소가 원래대로라면 박스를 화면 밖으로 스크롤할 때에도 박스를 계속 보이게 만듭니다.

• 절대 위치 지정은 일반 레이아웃을 완전히 무시하고, 요소를 레이아웃 흐름 밖으로 빼내어 다른 콘텐츠를 신경쓰지 않고 자신의 포함 블록을 기준으로 위치시킵니다.

• 고정 위치 지정은 박스를 절대 위치시키고 뷰포트 또는 페이지 프레임에 고정하여 항상 화면에 보이게 만듭니다.

이러한 위치 지정 방식들은 position 속성과 inset 속성들에 의해 제어되며, 강력하지만 쉽게 오용될 수 있습니다. 적절하게 사용하면 기존 레이아웃 규칙만으로는 불가능한 다양하고 유용한 레이아웃을 만들 수 있지만, 그렇지 않으면 페이지가 사용 불가능한 겹치는 콘텐츠의 뒤죽박죽으로 배치될 수 있습니다.

1.1. 모듈 상호작용

이 모듈은 위치 지정 방식 관련 기능을 [CSS2]의 다음 섹션들을 대체 및 확장합니다:

• 9.1.2 포함 블록
• 9.3 위치 지정 방식
• 9.4.3 상대 위치 지정
• 9.6 절대 위치 지정
• 9.7 display, position, float 간의 관계
• 9.8 일반 흐름, 플로트, 절대 위치 지정 비교
• 10.1 "포함 블록" 정의
• 10.3.7 절대 위치, 교체되지 않은 요소
• 10.3.8 절대 위치, 교체된 요소
• 10.6.4 절대 위치, 교체되지 않은 요소
• 10.6.5 절대 위치, 교체된 요소

또한 [CSS-LOGICAL-1]의 inset* 속성 정의(CSS Logical Properties 1 § 4.3 흐름-기준 오프셋: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end 속성과 inset-block, inset-inline, inset 단축 속성)도 대체 및 폐기합니다.

1.2. 값 정의

이 명세는 CSS 속성 정의 관례를 [CSS2]에서 따르며, 값 정의 문법은 [CSS-VALUES-3]을 사용합니다. 이 명세에서 정의하지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과 조합할 경우, 이러한 값 타입의 정의가 확장될 수 있습니다.

각 속성 정의에 명시된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS-wide 키워드도 값으로 허용됩니다. 가독성을 위해 명시적으로 반복하지 않았습니다.

2. 위치 지정 방식 선택: position 속성

position 속성은 박스의 위치 계산에 사용할 위치 지정 방식을 결정합니다. static 이외의 값을 사용하면 해당 박스는 위치 지정 박스가 되며, 자식들을 위한 절대 위치 지정 포함 블록을 생성합니다. 각 값의 의미는 다음과 같습니다:

static

박스는 위치 지정 박스가 아니며, 부모 포맷팅 컨텍스트의 규칙에 따라 배치됩니다. inset 속성들은 적용되지 않습니다.

relative

박스는 static과 동일하게 배치된 뒤, 그 위치에서 오프셋이 적용됩니다. 이 오프셋은 순수한 시각적 효과이며, 별도의 명시가 없는 한, 자손이 아닌 다른 박스의 크기나 위치에는 영향을 주지 않습니다. 단, 상위 요소의 스크롤 가능한 오버플로 영역이 증가하는 경우는 예외입니다. 이 위치 지정 방식은 상대 위치 지정이라 합니다.

sticky

relative와 거의 같으나, 오프셋이 가장 가까운 상위 스크롤 컨테이너의 스크롤포트(inset 속성에 의해 수정됨)를 기준으로 자동 조정됩니다. inset 속성들 중 둘 다 auto가 아닌 축에서 박스를 최대한 보이게 유지합니다. 이 위치 지정 방식은 스티키 위치 지정입니다.

absolute

박스는 레이아웃 흐름 밖으로 빠지며 형제 및 상위 박스의 크기나 위치에 영향을 주지 않고, 부모의 포맷팅 컨텍스트에도 참여하지 않습니다.

대신 박스는 자신의 절대 위치 지정 포함 블록만을 기준으로 (inset 속성에 의해 수정됨) 위치와 크기가 결정됩니다. 자세한 내용은 § 4 절대 위치 지정 레이아웃 모델 참고. 이 박스는 레이아웃 흐름 내 콘텐츠나 다른 절대 위치 지정된 요소와 겹칠 수 있습니다. 박스를 생성하는 스크롤 가능한 오버플로 영역에도 포함됩니다. 이 위치 지정 방식은 절대 위치 지정입니다.

fixed

absolute와 같으나, 박스가 고정 위치 지정 포함 블록(일반적으로 뷰포트 또는 연속 미디어의 경우, 페이지 영역의 경우 페이지 미디어)를 기준으로 위치와 크기가 결정됩니다. 박스의 위치는 이 기준 사각형에 대해 고정됩니다: 뷰포트에 부착된 경우 스크롤해도 움직이지 않고, 페이지 영역에 부착된 경우 문서를 페이지화할 때마다 복제됩니다. 이 위치 지정 방식은 고정 위치 지정이며, 절대 위치 지정의 하위 집합으로 간주됩니다.

작성자는 fixed를 미디어별로 지정할 수도 있습니다. 예를 들어, 작성자는 박스가 화면 상단에는 계속 보이지만 인쇄 페이지 상단에는 나타나지 않기를 원할 수 있습니다. 두 가지 명세를 '@media' 규칙으로 분리할 수 있습니다:

@media screen {
    h1#first { position: fixed }
}
@media print {
    h1#first { position: static }
}

position 값이 absolute 또는 fixed인 경우, 박스는 blockify 처리되고, float 값은 none으로 계산되며, 박스는 독립적인 포매팅 컨텍스트를 생성하게 됩니다.

2.1. 위치 지정 박스의 포함 블록

포함 블록은 static, relative, sticky 박스의 경우 해당 포맷팅 컨텍스트에 의해 정의됩니다. fixed 및 absolute 박스의 경우, 아래와 같이 정의됩니다:

박스가 position: absolute인 경우:

포함 블록은 가장 가까운 상위 박스 중 절대 위치 지정 포함 블록을 생성하는 박스에 의해 아래 방식으로 결정됩니다:

상위가 인라인 박스가 아닌 경우,

포함 블록은 상위의 패딩 에지로 형성됩니다. 단, 별도 명시가 있으면 예외 (예: CSS Grid Layout 1 § 9.1 그리드 컨테이너 포함 블록인 경우 참고).

상위가 인라인 박스이며, 해당 박스의 writing mode를 사용할 경우,

포함 블록은 상위 박스의 첫 박스 프래그먼트의 양 축에서 start 위치의 콘텐츠 에지와 각 축의 마지막 end 위치 박스 프래그먼트의 콘텐츠 에지로 사각형을 만듭니다. 같은 줄에 여러 프래그먼트가 있을 경우 (예: 양방향 재정렬), start 위치의 프래그먼트를 첫 프래그먼트로 사용합니다.

박스가 여러 줄에 걸쳐 분할될 때 유용한 포함 블록은 어떻게 정의해야 할까? [이슈 #8284]

참고: 분할된 인라인 박스가 형성하는 포함 블록은 [CSS2]에서 정의되지 않았습니다.

상위 중 아무도 포함 블록을 생성하지 않으면, 절대 위치 지정 포함 블록은 초기 포함 블록이 됩니다.

참고: 박스가 절대 위치 지정 포함 블록을 생성하게 하는 속성에는 position, transform, will-change, contain 등이 있습니다…

박스가 position: fixed인 경우:

포함 블록은 가장 가까운 상위 박스 중 고정 위치 지정 포함 블록을 생성하는 박스에 의해 결정되며, 포함 블록의 경계는 절대 위치 지정 포함 블록과 동일하게 산출됩니다.

참고: 박스가 고정 위치 포함 블록을 생성하게 할 수 있는 속성에는 transform, will-change, contain 등이 있습니다…

조상 요소가 고정 위치 포함 블록을 생성하지 않는 경우, 박스의 고정 위치 포함 블록은 초기 고정 포함 블록입니다:

• 연속 미디어에서는 레이아웃 뷰포트 (크기는 동적 뷰포트 크기와 일치)입니다; 그 결과, fixed 박스는 문서를 스크롤해도 이동하지 않습니다.

  참고: 이 점에서, 고정 배경 이미지 (background-attachment: fixed)와 유사합니다.

• 페이지 미디어에서는 각 페이지의 페이지 영역입니다; 고정 위치 박스는 각 페이지마다 복제됩니다. (이들은 페이지 박스 기준으로만 고정되며, 뷰포트를 통해 볼 때의 영향을 받지 않습니다; 예를 들어 인쇄 미리보기와 같은 경우입니다.)

참고: 그 결과, 고정 위치 박스의 일부가 레이아웃 뷰포트/ 페이지 영역을 벗어나는 경우, 해당 부분은 스크롤할 수 없으며 인쇄되지 않습니다.

초기 고정 포함 블록은 초기 포함 블록의 부모이며, 포함 블록 체인에서 상위에 위치합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>포함 블록 예시</title>
    </head>
    <body id="body">
        <div id="div1">
        <p id="p1">첫 번째 문단의 텍스트...</p>
        <p id="p2">이것은 텍스트 <em id="em1"> 두 번째
        <strong id="strong1">문단</strong> 입니다.</em></p>
        </div>
    </body>
</html>

#div1 { position: absolute; left: 50px; top: 50px }

#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }

2.1.1. 포함 블록의 추가 조정

일부 기능은 포함 블록 사각형을 절대 위치 지정 박스에서 변경할 수 있습니다. 이러한 기능은 아래 순서대로 적용되며, 앞 단계가 포함 블록을 수정하면 이후 단계에서 그 수정된 블록을 참조합니다:

1. grid-placement 속성이 절대 위치 지정 박스에서 포함 블록을 grid 컨테이너가 생성하는 경우, 포함 블록 사각형을 지정된 grid area로 변경할 수 있습니다. CSS Grid Layout 1 § 9.1 그리드 컨테이너 포함 블록 참고.

2. position-area 및 position-try 속성은 포함 블록 사각형을 position-area grid의 지정된 영역으로 바꿀 수 있습니다. CSS Anchor Positioning § 3.1 position-area 속성 참고.

요소의 원래 포함 블록은 위 효과를 적용하기 전의 포함 블록입니다.

2.2. 페인팅 순서와 스태킹 컨텍스트

z-index 속성은 모든 위치 지정 박스에 적용됩니다. z-index가 auto일 때:

• fixed 및 sticky 위치 지정 박스는 스태킹 컨텍스트를 생성합니다.

• relative 및 absolute 위치 지정 박스는 스태킹 컨텍스트를 생성하지 않지만, 마치 해당 요소가 새로운 스태킹 컨텍스트를 만든 것처럼 페인팅됩니다. 단, 그 위치 지정 자손과 자식 스태킹 컨텍스트는 현재 스태킹 컨텍스트에 참여합니다.

참고: 루트 요소는 항상 스태킹 컨텍스트를 생성합니다.

자세한 z-index, 스태킹 컨텍스트 및 페인팅 순서 내용은 CSS2 § 9.9 레이어 프레젠테이션과 부록 E: 스태킹 컨텍스트 상세 설명을 참고하세요.

3. 위치 지정 좌표

위치 지정 박스의 정확한 위치는 inset 속성들에 의해 제어됩니다: 물리적 inset 속성 top, right, bottom, left; 흐름-기준 inset 속성 inset-block-start, inset-inline-start, inset-block-end, inset-inline-end; 그리고 이들의 단축 속성, inset-block, inset-inline, inset 등이 있습니다.

이 inset 속성의 해석은 위치 지정 방식에 따라 다릅니다:

• 절대 위치 지정에서는 포함 블록으로부터의 inset을 의미합니다.

• 상대 위치 지정에서는 박스의 원래 margin edge로부터의 inset을 의미합니다.

• 스티키 위치 지정에서는 scrollport 엣지로부터의 inset을 의미합니다.

3.1. 박스 인셋: top, right, bottom, left, inset-block-start, inset-inline-start, inset-block-end, inset-inline-end 속성

이 inset 속성들은 박스의 해당 면에 대해 안쪽으로 "인셋"을 나타냅니다 (박스의 writing mode 기준; CSS Writing Modes 3 § 6 추상 박스 용어 참고). 예를 들어, top은 위쪽 엣지에서 아래 방향으로 인셋을 나타냅니다. 물리적 및 흐름-기준 속성은 [CSS-LOGICAL-1]에 정의된 대로 상호작용합니다. 각 값의 의미는 아래와 같습니다:

<length>

인셋이 기준 엣지로부터 고정 거리입니다. 음수 값도 허용됩니다.

<percentage>

인셋이 해당 축에서 포함 블록의 크기 기준으로 한 백분율입니다 (예: left 또는 right는 너비, top 및 bottom은 높이). 스티키 위치 지정 박스에서는 인셋이 해당 scrollport의 크기 기준이 됩니다. 음수 값도 허용됩니다.

auto

제한 없는 인셋을 나타내며; 정확한 의미는 위치 지정 방식에 따라 달라집니다.

참고: 고정 위치 지정 요소에서는, 큰 값이나 음수 값을 사용하면 쉽게 요소를 뷰포트 밖으로 이동시켜 스크롤 또는 다른 방법으로 콘텐츠에 접근할 수 없게 만들 수 있습니다.

3.2. 박스 인셋 단축 속성: inset-block, inset-inline, inset 속성

inset-block과 inset-inline 속성은 단축 속성으로, inset-block-start + inset-block-end 또는 inset-inline-start + inset-inline-end를 한 번에 선언할 수 있습니다. 첫 번째 값은 start 면을, 두 번째 값은 end 면을 설정합니다; 두 번째 값이 생략되면 첫 번째 값이 기본값이 됩니다.

inset 속성은 단축 속성으로, 모든 inset 속성을 한 번에 선언하며, 각 면에 해당하는 longhand 속성에 값을 할당하는 방식은 margin 속성과 동일합니다.

3.3. 상대 위치 지정

상대 위치 지정된 박스의 경우, inset 속성이 박스를 해당 엣지에서 안쪽으로 이동시키며, 박스의 크기는 변경되지 않습니다. left는 박스를 오른쪽으로, right는 왼쪽으로 이동시킵니다. 박스는 상대 위치 지정에 의해 분할되거나 늘어나지 않으므로, 한 축에서 반대되는 유효값은 서로 부정이어야 합니다:

• 한 축에서 반대되는 inset 속성이 모두 auto로 계산되면(즉, 초기값), 유효값은 0이 됩니다 (즉, 박스는 원래 위치에 그대로 있습니다).
• 둘 중 하나만 auto라면, 그 유효값은 반대값의 부정값이 되고, 박스는 지정된 만큼 이동됩니다.
• 둘 다 auto가 아니면, 위치가 과도하게 제약됩니다; (해당 박스의 writing mode 기준) computed 끝 값은 무시되고, 그 유효값은 시작 값의 부정값이 됩니다.

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

table-row-group, table-header-group, table-footer-group, table-row 박스에서 지정된 경우, 해당 박스의 모든 콘텐츠(해당 행에 속한 모든 table cell 포함)에 영향을 주지만, 다른 행에서 유래한 셀에는 영향을 주지 않습니다.

참고: position 속성은 table-column-group 또는 table-column 박스에는 적용되지 않으므로, 해당 박스들은 상대 위치 지정의 영향을 받지 않습니다.

3.4. 스티키 위치 지정

스티키 위치 지정은 상대 위치 지정과 비슷하지만, 오프셋이 가장 가까운 scrollport 기준으로 자동 계산됩니다.

스티키 위치 지정된 박스의 경우, inset 속성은 가장 가까운 scrollport의 각 엣지로부터의 inset을 나타내며, 박스의 위치를 제한하는 sticky view rectangle을 정의합니다. (이 목적에서는 auto 값이 0 inset을 의미합니다.) 만약 어떤 축에서 sticky view rectangle 크기가 border box 크기보다 작아지면, 해당 축의 유효 끝 인셋이 줄어들거나(음수가 될 수도 있음) sticky view rectangle 크기가 그 축의 border box 크기까지 늘어나도록 조정됩니다 (여기서 끝은 writing mode 기준).

박스의 각 면에 대해, 해당 inset 속성이 auto가 아니고, 박스의 해당 border edge가 sticky view rectangle의 해당 엣지 바깥에 있다면, 박스는 반드시 시각적으로 이동되어야 하며 (상대 위치 지정과 동일), 해당 sticky view rectangle 엣지 안쪽으로 들어가도록, 다만 position box가 자신의 포함 블록 내에 유지되는 한에서만 이동됩니다. position box는 margin box이지만, 박스의 margin edge와 포함 블록의 해당 엣지 사이 거리가 해당 margin보다 작으면, 해당 거리를 margin 대신 사용합니다.

참고: auto가 아닌 top 값을 갖고 auto bottom 값을 갖는 스티키 위치 지정 요소는 스티키 위치 지정에 의해 아래쪽으로만 이동되며, 위쪽으로는 오프셋되지 않습니다.

참고: 동일 컨테이너 내 여러 스티키 위치 지정 박스는 각각 독립적으로 오프셋되어, 서로 겹칠 수도 있습니다.

3.4.1. 스티키 위치 지정 박스의 스크롤 위치

스티키 위치 지정된 요소(또는 그 자손)의 스크롤 위치를 대상으로 하는 어떤 작업에서도, 스티키 위치 지정 요소는 반드시 오프셋된 위치에 있는 것으로 간주해야 합니다.

3.5. 절대(및 고정) 위치 지정

절대 위치 지정된 박스의 경우, inset 속성은 박스의 크기와 위치가 지정되는 포함 블록을 지정된 만큼 축소합니다. 이때 만들어지는 사각형을 inset-수정 포함 블록이라고 합니다. (구분을 위해 실제 포함 블록을 절대 위치 지정 박스의 절대 위치 포함 블록이라고도 할 수 있습니다.)

3.5.1. “Inset-수정 포함 블록” 인셋 값 해결

한 축에서 단 하나의 inset 속성만 auto라면, 해당 값은 0으로 설정됩니다. 한 축에서 inset 속성 둘 모두가 auto면, 박스의 해당 축 self-alignment 속성에 따라 아래와 같이 처리합니다:

self-start 정렬 또는 동등한 경우

시작 엣지 inset 속성을 static position으로 설정하고, 끝 엣지 inset 속성은 0으로 설정합니다.

self-end 정렬 또는 동등한 경우

끝 엣지 inset 속성을 static position으로, 시작 엣지 inset 속성은 0으로 설정합니다.

center 정렬

start distance는 static-position rectangle의 중심에서 포함 블록의 시작 엣지까지의 거리, end distance는 중심에서 static-position rectangle의 끝 엣지까지의 거리입니다. start distance가 end distance보다 작거나 같으면, 시작 엣지 inset 속성을 0으로, 끝 엣지 inset 속성을 (포함 블록 크기 - 2 × |start distance|)로 설정; 그렇지 않으면, 끝 엣지 inset 속성은 0, 시작 엣지 inset 속성은 (포함 블록 크기 - 2 × |end distance|)로 설정합니다.

위 규칙에서는 overflow alignment는 무시하고, normal은 start와 동일하게, baseline 또는 stretch 정렬 값은 대체 정렬로 처리합니다.

이러한 조정 결과, 어떤 축에서 포함 블록 크기가 0보다 작아지면, 해당 축의 약한 인셋이 줄어들거나(음수가 될 수도 있음) 크기가 0이 되도록 합니다. 한 인셋만 auto인 경우, 해당 인셋이 약한 인셋이고, 반대 인셋이 강한 인셋입니다; 그렇지 않으면 약한 인셋은 끝 엣지 인셋입니다 (여기서 끝은 writing mode 기준 포함 블록에 따릅니다).

참고: 절대 위치 지정된 박스의 크기 및 위치 지정은 inset-수정 포함 블록 내에서 § 4 절대 위치 지정 레이아웃 모델에 설명된 대로 처리됩니다.

한 축에서 self-alignment 속성이 normal이면, 그 축의 해결값은 약한 인셋이 inset-수정 포함 블록의 해당 엣지가 margin box의 해당 엣지와 맞도록 필요한 값입니다. (그 외에는 해결값이 위에 설명된 유효값입니다.)

3.5.2. 정적 위치 및 “정적 위치 사각형” 계산

한 축에서 두 inset 속성 모두 auto인 경우, 박스는 정적 위치에 맞춰 정적 위치 사각형에 정렬되어 결정됩니다. 이 사각형은 박스가 실제로 position: static이었다면 참여했을 정렬 컨테이너를 포맷팅 컨텍스트에서 유도합니다(실제 포함 블록과 무관하게). 정적 위치는 박스가 position: static일 때 있었을 것으로 추정되는 위치를 나타냅니다.

블록 레이아웃

정적 위치는 블록 수준 박스의 경우 [CSS2] 10장에서 정의됩니다. 정적 위치 사각형은 박스의 정적 위치 포함 블록의 인라인 축 양쪽과 block-start 정적 위치에 위치하는 0 두께 사각형입니다(CSS2§10.6.4 참고).

참고: 블록 레이아웃에서 정적 위치 사각형은 CSS2.1§10.3.7에 설명된 “가상 박스” 위치와 일치합니다. CSS2.1에는 정렬 속성이 없으므로, 항상 block-start inline-start 정렬로 절대 위치 박스를 정적 위치 사각형 내에 배치합니다.

인라인 레이아웃

정적 위치는 인라인 수준 박스의 경우 [CSS2] 10장에서 정의됩니다. 정적 위치 사각형은 line-over/line-under 엣지와 해당 “가상 박스”를 포함할 line box 위치 사이를 잇는 0 두께 사각형입니다(CSS2§10.3.7 참고). inline-start 정적 위치에 위치합니다.

플렉스 레이아웃

정적 위치 사각형은 flex 컨테이너 자식의 경우 교차축에서 flex 컨테이너의 content edge와, 주축에서는 가상 위치의 outer edge에 일치합니다. 플렉스 컨테이너 자식의 정적 위치는 [CSS-FLEXBOX-1] 참고.

그리드 레이아웃

기본적으로 정적 위치 사각형은 grid 컨테이너 자식의 경우 그리드 컨테이너의 content edge에 일치합니다. 단, 그 grid 컨테이너가 박스의 실제 포함 블록도 생성한다면, grid area가 grid-placement 속성에 의해 정적 위치 사각형을 결정합니다. 그리드 컨테이너 자식의 정적 위치는 [CSS-GRID-1] 참고.

static position과 static-position rectangle을 찾을 때는 float, clear (그리고 position도 포함) 값이 초기값이라고 가정합니다. 따라서 display에 대해서도 다른 가상의 값을 가정해야 할 수 있습니다. (이 조건에서 요소가 가지게 될 containing block은 static-position containing block입니다.) 박스 정렬 속성이 영향을 미치는 경우, static-position containing block을 유효한 containing block으로 사용하며, 정렬 축과 방향을 결정할 때 그 쓰기 모드를 사용합니다. 또한, fixed positioned 요소의 containing block은 initial containing block으로 간주하며, viewport가 아닙니다. 그리고 모든 scroll container는 초기 스크롤 위치로 스크롤되어 있다고 가정합니다. 마지막으로, 박스 자체의 모든 auto 마진은 0으로 처리됩니다.

top layer에 있는 박스는 항상 initial containing block을 static-position rectangle으로 사용합니다.

3.5.3. 절대 위치 요소의 단편화

단편화된 플로우에서는 절대 위치 박스가 자신의 containing block을 기준으로 단편화 분리를 무시하고 (플로우가 연속적인 것처럼) 위치가 정해집니다. 그 박스는 이후 여러 단편화 컨테이너에 걸쳐 분할될 수 있습니다.

페이지 미디어에서의 절대 위치 콘텐츠가 현재 레이아웃되는 페이지(현재 페이지)가 아닌 다른 페이지에 위치가 결정되거나, 현재 페이지에서 이미 인쇄 렌더링이 끝난 영역에 위치가 결정되는 경우, 프린터는 해당 콘텐츠를 다음과 같이 처리할 수 있습니다:

• 현재 페이지에 배치
• 이후의 페이지에 배치
• 아예 생략

참고: 여러 페이지에 걸쳐 분할된 블록 레벨 요소는 각 페이지마다 너비가 다를 수 있으며, 디바이스별 제한이 있을 수 있습니다.

사용자 에이전트는 고정 위치 박스의 콘텐츠를 페이지별로 분할해서는 안 됩니다.

참고: 사용자 에이전트는 보이지 않는 콘텐츠를 다른 방식으로 인쇄할 수도 있습니다. CSS Paged Media 3 § 3.2 페이지 박스 밖의 콘텐츠를 참고하세요.

4. 절대 위치 지정 레이아웃 모델

절대 위치 지정은 박스를 레이아웃 흐름 밖으로 만들 뿐만 아니라, 포함 블록(포함 블록의 최종 크기가 결정된 후)에 절대 위치 지정 레이아웃 모델에 따라 배치합니다:

1. 먼저 inset-수정 포함 블록을 계산합니다. 여기서 사용 가능한 공간을 정의합니다. (§ 3.5 절대(및 고정) 위치 지정 참고.)

   절대 위치 지정 박스는 포함 블록의 크기에 영향을 주지 않으므로, 사용 가능한 공간은 항상 확정적(definite)입니다.

2. 그 다음, 박스의 너비와 높이를 해당 확정적 사용 가능한 공간에 대해 결정합니다. 선호 크기가 최대 크기로 제한되며(있을 경우), 최소 크기로 바닥값이 정해집니다. § 4.1 절대 위치 지정 박스의 자동 크기 참고. 단, 백분율은 원래 포함 블록 크기를 기준으로 계산됩니다.
3. 그 다음, auto margin 값을 계산합니다. § 4.2 절대 위치 지정 박스의 자동 margin 참고.
4. 마지막으로 margin box를 inset-수정 포함 블록 내에서 정렬합니다. § 5 절대 위치 지정 박스의 자기 정렬 참고.

4.1. 절대 위치 지정 박스의 자동 크기

자동 크기는 절대 위치 지정 박스의 경우 inset-수정 포함 블록을 기준으로 아래와 같이 결정합니다:

해당 축의 self-alignment 속성이 stretch이고, 그 축의 inset 속성이나 margin이 auto가 아닌 경우

혹은 normal이고 해당 박스가 비교체(non-replaced)이며 테이블 래퍼 박스가 아니고, 해당 축의 auto inset이 없는 경우

자동 크기는 stretch-fit 크기입니다.

그 외의 경우

자동 크기는 fit-content 크기입니다.

단, 박스에 aspect-ratio가 있다면, 자동 크기는 비율 종속 축에서 max-content 크기로 결정됩니다. 두 축 모두 자동 크기일 때, 한 축에만 auto inset이 있으면 그 축이 비율 종속 축이 되고, 그렇지 않으면 block 축이 비율 종속 축이 됩니다. 비율 결정 축에서 자동 크기는 위 방식으로 결정됩니다.

이 크기를 계산할 때 auto margin은 0으로 간주합니다.

절대 위치 지정 박스의 자동 최소 크기는 항상 0입니다.

참고: 폼 컨트롤이 크기 조정될 수 있고(이미지 등 교체 요소를 직접 나타내는 게 아니라면), 여기서는 비교체(non-replaced)로 취급해야 합니다. HTML에서 <input type=image>을 제외한 모든 폼 컨트롤은 비교체로 취급됩니다.

4.2. 절대 위치 지정 박스의 자동 margin

해당 축의 inset 속성 중 하나라도 auto라면, 그 축의 auto margin은 0으로 계산됩니다.

그 외에는 남은 공간을 해당 축의 inset-수정 포함 블록 크기에서 박스의 사용된 크기를 뺀 값으로 산출하고, 이 남은 공간을 해당 축의 auto margin에 분배합니다. 단, (writing mode 및 포함 블록 기준) 인라인 축에서 남은 공간이 음수이고 margin 둘 다 auto이면, start margin은 0, end margin이 남은 공간을 받습니다.

참고: 일반 레이아웃 흐름과 달리, auto margin에 분배되는 공간은 절대 위치 지정에서는 음수가 될 수 있습니다.

“음수 크기” 포함 블록에서 어떻게 해야 하는가? CSS2.1과 이 초안이 현재 상충함. [이슈 #11478]

5. 절대 위치 지정 박스의 자기 정렬

해당 축의 계산값 중 하나라도 inset 속성이 auto이면, 박스의 margin box는 inset-수정 포함 블록의 강한 인셋이 해당하는 엣지에 정렬됩니다(포함 블록을 오버플로하더라도).

그 외에는 해당 축의 margin 중 하나라도 auto면, § 4.2 절대 위치 지정 박스의 자동 margin에 따라 위치가 결정됩니다.

그 외에는 박스가 해당 축의 self-alignment 속성에 따라 정렬되며 (writing mode 및 포함 블록 기준), margin box를 정렬 주체로, inset-수정 포함 블록을 정렬 컨테이너로 사용합니다. 단, 명시적 overflow 정렬이 지정되지 않았고 margin box가 inset-수정 포함 블록을 넘치면, CSS Box Alignment 3 § 4.4.1.2 절대 위치 지정 박스의 자기 정렬에 따라 오버플로가 최소화되도록 정렬이 조정됩니다.

6. 기존 절대 위치 지정 레이아웃 모델

이 섹션은 새로운 § 4 절대 위치 지정 레이아웃 모델로 대체 예정입니다. 비교를 위해 보존되었으며: 두 모델은 수평 writing mode에서 박스의 self-alignment가 normal일 때 동일한 결과를 산출해야 합니다.

6.1. 절대 위치, 비교체 요소의 너비

이 요소의 유효값을 결정하는 제약은 다음과 같습니다:

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 포함 블록의 너비

left, width, right 셋 모두 auto인 경우: 먼저 auto인 margin-left와 margin-right를 0으로 설정합니다. 그 다음, 정적 위치 포함 블록을 생성하는 요소의 direction 속성이 ltr이면 left를 정적 위치로 설정하고 아래 규칙 세 번째를 적용; 아니면 right를 정적 위치로 설정하고 아래 규칙 첫 번째를 적용합니다.

셋 모두 auto가 아닌 경우: margin-left와 margin-right 둘 다 auto면, 두 margin 값이 같아야 한다는 추가 제약으로 식을 풉니다. 단, 음수가 되면 포함 블록의 direction이 ltr(rtl)일 때, margin-left(margin-right)를 0으로 하고 margin-right(margin-left)를 풉니다. margin-left 또는 margin-right 중 하나만 auto면, 그 값에 대해 식을 풉니다. 값이 과도하게 제약된 경우, left(포함 블록의 direction이 rtl일 때) 또는 right(direction이 ltr일 때) 값을 무시하고 해당 값에 대해 풉니다.

그 외에는, auto인 margin-left와 margin-right를 0으로 설정하고, 적용되는 아래 6가지 규칙 중 하나를 선택합니다.

1. left와 width가 auto이고 right가 auto가 아니면, width는 shrink-to-fit입니다. 그리고 left를 풉니다.
2. 만약 left와 right가 auto이고 width가 auto가 아니라면, 해당 정적 위치 direction 속성이 정적 위치 containing block을 설정하는 요소에서 ltr이면 left를 정적 위치로 설정하고, 그렇지 않으면 right를 정적 위치로 설정합니다. 그 후 left (direction이 rtl일 경우) 또는 right (direction이 ltr일 경우)를 계산합니다.
3. width와 right가 auto이고 left가 auto가 아니면, width는 shrink-to-fit입니다. 그리고 right를 풉니다.
4. left가 auto이고, width와 right가 auto가 아니면, left를 풉니다.
5. width가 auto이고, left와 right가 auto가 아니면, width를 풉니다.
6. right가 auto이고, left와 width가 auto가 아니면, right를 풉니다.

6.2. 절대 또는 고정 위치 지정된 교체 요소의 너비

height와 width 모두 계산값이 auto이고, 요소에 고유 너비가 있을 경우, 그 고유 너비가 width의 사용값이 됩니다.

height와 width 모두 계산값이 auto이고, 요소에 고유 너비가 없지만 고유 높이와 고유 비율(ratio)이 있거나; 또는 width가 계산값 auto, height가 다른 계산값이며, 요소에 고유 비율이 있을 경우; width의 사용값은 다음과 같습니다:

(used height) * (intrinsic ratio)

height와 width 모두 계산값이 auto이고, 요소에 고유 비율만 있고 고유 높이/너비가 없으며, 포함 블록의 너비가 교체 요소의 너비에 의존하지 않을 경우, width의 사용값은 일반 흐름 내 블록 수준, 비교체 요소의 제약식으로 계산합니다.

그 외에 width가 계산값 auto이고, 요소에 고유 너비가 있을 경우, 그 고유 너비가 width의 사용값이 됩니다.

그 외에 width가 계산값 auto이지만 위 조건에 모두 해당하지 않으면, width의 사용값은 300px이 됩니다. 300px이 디바이스에 맞지 않을 정도로 넓으면, 사용자 에이전트는 2:1 비율을 갖고 디바이스에 맞는 가장 큰 사각형의 너비를 사용해야 합니다.

width가 결정된 후, 교체 요소를 배치하기 위해 아래 규칙을 적용합니다.

1. left와 right 모두 값이 auto이고, 정적 위치 포함 블록을 생성하는 요소의 direction 속성이 ltr이면, left를 정적 위치로 설정하고 right를 풉니다; direction이 rtl이면, right를 정적 위치로 설정하고 left를 풉니다.
2. left가 auto이고 right가 auto가 아니면, margin-left 또는 margin-right의 auto를 0으로 바꾼 뒤, left를 풉니다.
3. right가 auto이고 left가 auto가 아니면, margin-left 또는 margin-right의 auto를 0으로 바꾼 뒤, right를 풉니다.
4. 이 시점에서 margin-left와 margin-right가 모두 auto이면, 두 margin 값이 같다는 추가 제약으로 식을 풉니다. 단, 음수가 되면 포함 블록의 direction이 ltr(rtl)일 때, margin-left(margin-right)를 0으로 하고 margin-right(margin-left)를 풉니다.
5. 이 시점에 auto 값이 남아 있다면, 그 값에 대해 식을 풉니다.
6. 이 시점에 값이 과도하게 제약되면, left(포함 블록의 direction이 rtl인 경우) 또는 right(direction이 ltr인 경우) 값을 무시하고 그 값에 대해 풉니다.

6.3. 절대 위치 지정, 비교체 요소의 높이

절대 위치 지정 요소의 경우, 세로 치수의 사용값은 다음 제약을 만족해야 합니다:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = 포함 블록의 높이

top, height, bottom 셋 모두 auto인 경우: margin-top과 margin-bottom의 auto 값을 0으로 설정, top을 정적 위치로 설정, 마지막으로 아래 규칙 세 번째를 적용합니다.

셋 모두 auto가 아닌 경우: margin-top과 margin-bottom 둘 다 auto이면, 두 margin 값이 같아야 한다는 추가 제약으로 식을 풉니다. margin-top 또는 margin-bottom 중 하나만 auto면, 그 값에 대해 식을 풉니다. 값이 과도하게 제약된 경우, bottom 값을 무시하고 해당 값에 대해 풉니다.

그 외에는, auto 값인 margin-top과 margin-bottom을 0으로 설정, 아래 6가지 규칙 중 하나를 적용합니다.

1. top과 height가 auto이고 bottom이 auto가 아니면, 높이는 블록 포맷팅 컨텍스트 루트의 자동 높이를 기반으로 합니다. 그 후 top을 풉니다.

2. top과 bottom이 auto이고 height가 auto가 아니면, top을 정적 위치로 설정, bottom을 풉니다.

3. height와 bottom이 auto이고 top이 auto가 아니면, 높이는 블록 포맷팅 컨텍스트 루트의 자동 높이를 기반으로 합니다. 그 후 bottom을 풉니다.

4. top이 auto이고, height와 bottom이 auto가 아니면, top을 풉니다.

5. height가 auto이고, top과 bottom이 auto가 아니면, height를 풉니다.

6. bottom이 auto이고, top과 height가 auto가 아니면, bottom을 풉니다.

6.4. 절대 위치 지정된 교체 요소의 높이

height와 width 모두 계산값이 auto이고 요소에 고유 높이가 있으면, 그 고유 높이가 height의 사용값이 됩니다.

그 외에 height가 계산값 auto이고 요소에 고유 비율이 있으면, height의 사용값은 다음과 같습니다:

(used width) / (intrinsic ratio)

그 외에 height가 계산값 auto이고 요소에 고유 높이가 있으면, 그 고유 높이가 height의 사용값이 됩니다.

그 외에 height가 계산값 auto이고 위 조건에 모두 해당하지 않으면, height의 사용값은 2:1 비율을 갖고, 높이가 150px 이하이며, 폭이 디바이스 폭 이하인 가장 큰 사각형의 높이어야 합니다.

height가 결정된 후, 교체 요소를 배치하기 위해 아래 규칙을 적용합니다.

1. top과 bottom이 auto이면, top을 요소의 정적 위치로 대체합니다.

2. bottom이 auto이면, margin-top이나 margin-bottom의 auto를 0으로 대체합니다.

3. 이 시점에서 margin-top과 margin-bottom이 모두 auto이면, 두 margin 값이 같다는 추가 제약으로 식을 풉니다.

4. 이 시점에서 auto가 하나만 남아 있다면, 그 값에 대해 식을 풉니다.

5. 이 시점에서 값이 과도하게 제약되면, bottom 값을 무시하고 해당 값에 대해 풉니다.

7. 일반 흐름, 플로트, 포지셔닝의 정보 비교

이 섹션은 규범적이지 않습니다.

일반 흐름, 상대적 포지셔닝, 플로트, 그리고 절대적 포지셔닝의 차이점을 설명하기 위해, 아래의 HTML을 기반으로 여러 예시를 제공합니다:

<!DOCTYPE html>
<html>
    <head>
        <title>포지셔닝 방식 비교</title>
        <style>
          body { display: block; font-size:12px; line-height: 200%;
                  width: 400px; height: 400px }
          p    { display: block }
          span { display: inline }
        </style>
    </head>
    <body>
    <p>
        p 내용의 시작.
        <span id="outer"> 외부 내용의 시작.
        <span id="inner"> 내부 내용.</span>
        외부 내용의 끝.</span>
        p 내용의 끝.
    </p>
    </body>
</html>

outer와 inner 요소가 생성한 박스의 최종 위치는 각각의 예시마다 달라집니다. 각 그림에서, 왼쪽에 있는 숫자는 일반 흐름 위치를 표시하며, 보기 쉽게 두 줄 간격으로 표시됩니다.

참고: 이 섹션의 다이어그램은 설명용으로 축척에 맞지 않습니다. 각각의 포지셔닝 방식의 차이를 강조하기 위한 것이며, 예시의 실제 렌더링을 참고하기 위한 것이 아닙니다.

7.1. 일반 흐름 예시

outer와 inner에 대해 박스의 일반 흐름을 변경하지 않는 다음 CSS 선언을 고려해보세요:

#outer { color: red }
#inner { color: blue }

P 요소는 모든 인라인 콘텐츠: 익명 인라인 텍스트와 두 개의 SPAN 요소를 포함합니다. 따라서 전체 내용은 인라인 포맷팅 컨텍스트에서, P 요소가 만든 포함 블록 내에서 레이아웃되며, 다음과 같이 렌더링됩니다:

7.2. 상대적 포지셔닝 예시

상대적 포지셔닝의 효과를 확인하기 위해 다음과 같이 지정합니다:

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

텍스트는 outer 요소까지 일반적으로 흐릅니다. outer 텍스트는 일반 흐름 위치와 크기로 1번 라인 끝에 배치됩니다. 그리고, 텍스트가 포함된 인라인 박스(세 줄에 분배됨)가 한 단위로 -12px (위쪽으로) 이동됩니다.

inner의 내용은 outer의 자식이므로, 보통 "외부 내용의 끝" 바로 뒤(라인 1.5)에 흐릅니다. 하지만 inner의 내용 자체는 12px (아래쪽) 만큼 outer 내용에 대해 오프셋되어 원래 위치인 2번 라인으로 돌아갑니다.

outer 뒤의 콘텐츠는 outer의 상대적 포지셔닝에 영향을 받지 않습니다.

만약 outer의 오프셋이 -24px이었다면, outer와 body 텍스트가 겹칠 수 있습니다.

7.3. 플로트 예시

이제 inner 요소의 텍스트를 오른쪽으로 플로트할 때의 효과를 살펴봅니다. 다음 규칙을 사용합니다:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

텍스트는 inner 박스까지 일반적으로 흐르다가, 플로트되어 오른쪽 여백으로 이동합니다(명시적으로 width가 지정됨). 플로트 왼쪽의 라인 박스는 짧아지고, 남은 텍스트가 그 안으로 흐릅니다.

플로트의 clear 속성 효과를 보여주기 위해, 예시에 sibling 요소를 추가합니다:

<!DOCTYPE html>
<html>
    <head>
        <title>포지셔닝 방식 비교 II</title>
        <style>
          #inner { float: right; width: 130px; color: blue }
          #sibling { color: red }
        </style>
    </head>
    <body>
    <p>
        p 내용의 시작.
        <span id="outer"> 외부 내용의 시작.
        <span id="inner"> 내부 내용.</span>
        <span id="sibling"> 형제 내용.</span>
        외부 내용의 끝.</span>
        p 내용의 끝.
    </p>
    </body>
</html>

이 스타일은 inner 박스를 이전과 같이 오른쪽으로 플로트시키고, 나머지 텍스트를 비워진 공간으로 흐르게 합니다:

하지만 sibling 요소의 clear 속성을 right로 설정하면(sibling 박스가 오른쪽에 있는 플로트 박스 옆에 오지 않음), sibling 내용이 플로트 아래에서 흐르기 시작합니다:

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

7.4. 절대적 포지셔닝 예시

다음으로, 절대적 포지셔닝의 효과를 살펴봅니다. outer와 inner에 대해 다음과 같은 CSS 선언을 고려합니다:

#outer {
    position: absolute;
    top: 200px; left: 200px;
    width: 200px;
    color: red;
}
#inner { color: blue }

이 선언은 outer 박스의 상단을 포함 블록 기준으로 위치시키게 합니다. 포함 블록은 가장 가까운 포지셔닝된 조상(없으면 초기 포함 블록)에 의해 결정됩니다. outer 박스의 상단은 200px 아래, 왼쪽은 200px 떨어져 위치합니다. outer의 자식 박스는 부모 기준으로 일반적으로 흐릅니다.

다음 예시는 상대적으로 포지셔닝된 박스의 자식으로 절대적으로 포지셔닝된 박스를 보여줍니다. 부모인 outer 박스는 실제로 오프셋되지는 않지만, position 속성을 relative로 설정하면 자식 박스의 포함 블록 역할을 하게 됩니다. outer 박스가 여러 줄로 나뉜 인라인 박스이므로, 첫 인라인 박스의 상단과 왼쪽 가장자리(아래 그림의 두꺼운 점선)가 top과 left 오프셋의 기준점이 됩니다.

#outer {
    position: relative;
    color: red
}
#inner {
    position: absolute;
    top: 200px; left: -100px;
    height: 130px; width: 130px;
    color: blue;
}

결과적으로 다음과 같이 나타납니다:

outer 박스를 포지셔닝하지 않으면:

#outer { color: red }
#inner {
    position: absolute;
    top: 200px; left: -100px;
    height: 130px; width: 130px;
    color: blue;
}

inner의 포함 블록은 초기 포함 블록이 됩니다(이 예시에서는 페이지 자체). 다음 그림은 이 경우 inner 박스가 어디에 위치하는지 보여줍니다.

상대 및 절대적 포지셔닝은 다음 예시와 같이 변경 바(change bar) 구현에 사용될 수 있습니다. 다음 코드 조각은:

<p style="position: relative; margin-right: 10px; left: 10px;">
  두 개의 빨간 하이픈을 변경 바로 사용했습니다.
  이 하이픈은 THIS가 들어간 줄의
  <span style="position: absolute; top: auto; left: -1em; color: red;">--</span>
  왼쪽에 "떠" 있을 것입니다.
</p>

다음과 같이 결과가 나올 수 있습니다:

먼저, 단락(P)은(포함 블록의 경계가 그림에 표시됨) 일반적으로 흐릅니다. 그런 다음 10px만큼 왼쪽에서 오프셋되고 포함 블록의 오른쪽 여백 10px이 미리 확보됩니다. 변경 바 역할을 하는 두 하이픈은 흐름에서 제외되고 (top: auto로 인해) 현재 줄에, 포함 블록의 왼쪽에서 -1em 떨어진 위치에 포지셔닝됩니다(P의 최종 위치에서 기준이 됨). 그 결과 변경 바가 항상 현재 줄의 왼쪽에 "떠" 있게 됩니다.

8. 감사의 글

이 모듈은 많은 분들의 도움과 지원 없이는 가능하지 않았을 것입니다. 감사의 말씀을 전합니다: Rossen Atanassov, Bert Bos, Oriol Brufau, Tantek Çelik, Arron Eicholz, Sylvain Galineau, John Jansen, Chris Jones, Ian Kilpatrick, Anton Prowse.

변경 사항

2025년 3월 11일 작업 초안 이후 주요 변경사항:

• 초기 고정 포함 블록과 초기 포함 블록과의 관계를 정의하여 이 개념에 이름을 부여했습니다.

또한 이전 변경사항도 참고하세요.

개인정보 보호 관련 사항

이 명세는 새로운 개인정보 보호 관련 사항을 도입하지 않습니다.

보안 관련 사항

공격자가 임의의 CSS를 삽입할 수 있는 경우, 위치 지정 레이아웃을 통해 공격자가 제어하는 요소를 페이지의 임의의 다른 요소 위에 배치하기가 쉬워집니다. 이는 페이지 사용자를 속일 수 있습니다. (이 공격에는 여러 경로가 있습니다: 음수 margin, transform 등. 페이지의 일부에 임의의 CSS를 적용하지 않도록 하세요.)

position: fixed를 사용하면 페이지가 모달 다이얼로그처럼 동작하도록 할 수 있어, 사용자가 사용자 에이전트와 상호작용한다고 착각하고 민감한 정보를 입력하게 할 수 있습니다. 사용자 에이전트는 네이티브 다이얼로그가 페이지에서 모방할 수 없는 방식으로 위치하도록 보장해야 합니다. 특히, 다이얼로그의 일부는 웹 콘텐츠가 그릴 수 있는 "오염된 픽셀" 범위 밖에 있어야 합니다.