Properties

Properties

  • account_tree
  • bug_report

Positioned Layout

콘텐츠와 겹칠 수 있도록 요소의 위치를 지정할 수 있는 속성들을 나타낸다.

개요

CSS 레이아웃 알고리즘은 기본적으로 박스의 크기와 위치를 서로 관련하여 겹치지 않도록 한다. CSS Positioned Layout Module은 이러한 가정을 위반하는 몇 가지 방법을 제시하고 다른 콘텐츠와 겹칠 수 있도록 요소의 위치를 지정할 수 있다.

이 모듈은 레이아웃을 지정하는 획기적인 방법을 제시하지만 자칫 오용하기가 쉽다. 콘텐츠의 위치를 제어하기가 혼란스러울 수 있고 반응형 레이아웃 처리에 어려움을 줄 수도 있다. 적절한 주의를 기울이면 일반적인 레이아웃에서 벗어나 흥미롭고 유용한 많은 레이아웃을 만들어 낼 수 있다.

관련 속성

  • bottom

    요소의 아래쪽 위치 값을 설정한다.
  • inset-block-end

    물리적인 bottom 속성을 논리적인 위치로 설정한다.
  • inset-block-start

    물리적인 top 속성을 논리적인 위치로 설정한다.
  • inset-inline-end

    물리적인 right 속성을 논리적인 위치로 설정한다.
  • inset-inline-start

    물리적인 left 속성을 논리적인 위치로 설정한다.
  • left

    요소의 왼쪽 위치 값을 설정한다.
  • position

    요소의 출력 위치 결정 방식을 정의한다.
  • right

    요소의 오른쪽 위치 값을 설정한다.
  • top

    요소의 상단 위치 값을 설정한다.

W3C Modules

CSS Positioned Layout Module Level 3
W3C Working Draft, 3 April 2023