CSS 정위치

CSS 정위치 (Positioning) 속성은 요소에 대한 정위치를 허용합니다.

CSS 정위치와 블로킹

CSS는 정위치와 블로킹에 대한 몇 가지 속성을 제공하며, 이러한 속성을 사용하여 열형 레이아웃을 구축하고 레이아웃의 일부를 다른 부분과 겹치게 할 수 있으며, 많은 해가 지나도 여러 테이블을 사용해야 하는 일반적인 작업을 완료할 수 있습니다.

정위치의 기본 아이디어는 매우 간단하며, 요소의 프레임이 정상적인 위치에 대해 나타나야 할 위치를 정의하거나 부모 요소, 다른 요소 또는 브라우저 창 자체에 대해 나타나야 할 위치를 정의할 수 있도록 합니다. 명확히 말하면, 이 기능은 매우 강력하며 놀라운 것입니다. 사용자代理가 CSS2에서 정위치에 대한 지원이 다른 측면보다 훨씬 더 많다는 것을 알아야 합니다.

다른 한편, CSS1에서는 최초로 블로킹이 제안되었으며, 이는 넷스케이프가 웹 개발 초기에 추가한 기능을 기반으로 하고 있습니다. 블로킹은 전적으로 정위치가 아니지만, 물론 정상적인 흐름 레이아웃도 아닙니다. 우리는 나중의 장에서 블로킹의 의미를 명확히 할 것입니다.

一切皆为框

div, h1 또는 p 요소는 종종 블록 요소로 불립니다. 이는 이러한 요소가 블록처럼 표시된다는 의미입니다.一块内容즉, '블록 프레임'입니다. 반대로 span과 strong 등의 요소는 '인라인 요소'라고 불리며, 이는 그들의 내용이 행에 표시된다는 의미입니다. 즉, '행 인라인 프레임'.

사용할 수 있습니다 display 속성생성된 프레임 유형을 변경합니다. 이는 display 속성을 block으로 설정하여 인라인 요소(예: <a> 요소)가 블록 요소처럼 행동할 수 있도록 합니다. 또한 display를 none으로 설정하면 생성된 요소가 프레임을 완전히 가지지 않게 하여, 문서 내에서 공간을 차지하지 않습니다.

하지만, 명시적으로 정의하지 않았을 때도 블록 요소가 생성될 수 있습니다. 이 상황은 어떤 텍스트를 블록 요소(예: div)의 시작에 추가할 때 발생합니다. 텍스트를 파라그램으로 정의하지 않았더라도, 그것은 파라그램으로 대우됩니다:

<div>
텍스트
<p>더 많은 텍스트.</p>
</div>

이 경우, 이 프레임은 특별히 정의된 요소와 연관되지 않기 때문에 이름 없는 블록 프레임이라고 합니다.

블록 요소의 텍스트 행도 유사한 상황이 발생합니다. 세 줄 텍스트를 포함한 문단이 있다고 가정해 보겠습니다. 각 줄 텍스트는 이름 없는 프레임을 형성합니다. 이름 없는 블록 또는 행 프레임에 스타일을 적용할 수 없습니다.因为没有可以应用样式的地方（주의，행 프레임과 인라인 프레임은 두 개의 개념입니다）。그러나 이는 화면에서 볼 수 있는 모든 것이 어떤 프레임으로 구성되어 있다는 이해에 도움이 됩니다.

CSS 정위치 기제

CSS는 세 가지 기본 정위치 기제를 가지고 있습니다: 일반 흐름, 풍선 및 절대 정위치.

특별히 지정하지 않은 경우 모든 프레임은 일반 흐름에서 정위치됩니다. 즉, 일반 흐름에서의 요소 위치는 (X)HTML 내의 위치에 의해 결정됩니다.

블록 프레임은 상단에서 하단으로 하나씩 연속적으로 배치됩니다. 프레임 간의 수직 간격은 프레임의 수직 외간격을 기준으로 계산됩니다.

인라인 프레임은 한 행에서 수평으로 배치됩니다. 수평 내간격, 경계선 및 외간격을 사용하여 그들의 간격을 조정할 수 있습니다. 그러나 수직 내간격, 경계선 및 외간격은 인라인 프레임의 높이에 영향을 미치지 않습니다. 한 행에서 형성된 수평 프레임은행 프레임(Line Box)행 프레임의 높이는 항상 그것이 포함하는 모든 인라인 프레임을 수용할 수 있도록 합니다. 그러나 행 높이를 설정하면 이 프레임의 높이를 증가시킬 수 있습니다.

다음 장에서는 상대 정위치, 절대 정위치 및 풍선 정위치를 상세히 설명할 것입니다.

CSS position 속성

사용하여 position 속성우리는 4 가지 다른 유형의 정위치를 선택할 수 있습니다. 이는 요소 프레임 생성 방식에 영향을 미칩니다.

position 속성 값의 의미:

static
요소 프레임이 정상적으로 생성됩니다. 블록 요소는 사각 프레임을 생성하여 문서 흐름의 일부로 사용되며, 인라인 요소는 부모 요소 내에 하나 또는 여러 개의 행 프레임을 생성합니다.
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
relative
요소의 테두리는 특정 거리를 이동합니다. 요소는 위치시키기 전의 형상을 유지하며, 원래 차지했던 공간은 그대로 유지됩니다.
absolute

요소의 테두리는 문서 흐름에서 완전히 제거되고 포함 블록에 대해 위치시킵니다. 포함 블록은 문서 내의 다른 요소일 수도 있고 초기 포함 블록일 수도 있습니다. 요소가 원래 일반 문서 흐름에서 차지했던 공간은 닫혀서, 요소가 원래 없었던 것처럼 보입니다. 요소가 위치시키면 블록 수준 테두리가 생성되며, 원래 일반 흐름에서 어떤 유형의 테두리를 생성했는지에 관계없이 유지됩니다.fixed

요소의 테두리는 position을 absolute로 설정한 것과 유사하게 보입니다. 그러나 포함된 블록은 창 자체입니다.

힌트:
상대 위치는 실제로는 일반 흐름 위치 모델의 일부로 보고됩니다. 요소의 위치는 일반 흐름에서의 위치에 비례합니다.
위치: 상대 위치
이 예제에서는 요소를 상대적으로 위치시키는 방법을 보여줍니다.
위치: 고정 위치
브라우저 창에 대한 요소 위치를 설정하는 방법을 보여줍니다.
고정값으로 이미지의 상단 경계 설정
이미지의 상단 경계를 고정값으로 설정하는 방법을 보여줍니다.
백분율로 이미지의 상단 경계 설정
이미지의 상단 경계를 백분율로 설정하는 방법을 보여줍니다.
픽셀값으로 이미지의 하단 경계 설정
이미지의 하단 경계를 픽셀값으로 설정하는 방법을 보여줍니다.
백분율로 이미지의 하단 경계 설정
이미지의 하단 경계를 백분율로 설정하는 방법을 보여줍니다.
고정값으로 이미지의 왼쪽 경계 설정
이미지의 왼쪽 경계를 고정값으로 설정하는 방법을 보여줍니다.
백분율로 이미지의 왼쪽 경계 설정
이미지의 왼쪽 경계를 백분율로 설정하는 방법을 보여줍니다.
고정값으로 이미지의 오른쪽 경계 설정
이미지의 오른쪽 경계를 고정값으로 설정하는 방법을 보여줍니다.
백분율로 이미지의 오른쪽 경계 설정
이미지의 오른쪽 경계를 백분율로 설정하는 방법을 보여줍니다.
스크롤 바를 사용하여 요소 내에서 여백 내용을 표시하는 방법
요소 내용이 지정된 영역을 벗어나면 overflow 속성을 사용하여 어떤 행동을 설정할지 보여줍니다.
여백 요소 내에서 여백 내용을 숨기는 방법
요소 내용이 지정된 영역에 맞지 않아 적응할 수 없을 때 overflow 속성을 사용하여 내용을 숨기는 방법을 보여줍니다.
브라우저가 자동으로 여백을 처리하는 방법
브라우저가 자동으로 여백을 처리하는 방법을 설정하는 방법을 보여줍니다.
요소의 형상 설정
이 예제에서는 요소의 형상을 설정하는 방법을 보여줍니다. 이 요소는 이 형상 안에 잘라져 나타납니다.
이미지를 가로로 정렬
이 예제에서는 텍스트 안에 이미지를 가로로 정렬하는 방법을 보여줍니다.
Z-index
Z-index를 사용하여 하나의 요소를 다른 요소 뒤에 배치할 수 있습니다.
Z-index
上面的例子中的元素已经更改了Z-index。

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性 描述
position 将元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定位元素下外边距边界与其包含块下边界之间的偏移。
left 定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 요소의 내용이 그 영역을 초과할 때 발생하는 일을 설정합니다.
clip 요소의 형상을 설정합니다. 요소는 이 형상 안에 자르여 나타납니다.
vertical-align 요소의 수직 정렬 방식을 설정합니다.
z-index 요소의 스택 순서를 설정합니다.