CSS 절대 정위치

절대 정위치로 설정된 요소의 프레임은 문서 흐름에서 완전히 제거되고, 포함 블록에 대해 정위치됩니다. 포함 블록은 문서 내 다른 요소일 수도 있고, 초기 포함 블록일 수도 있습니다. 요소가 일반 문서 흐름에서 차지했던 공간은 닫혀서, 그 요소가 원래 없는 것처럼 됩니다. 요소의 정위치 후에는 원래 일반 흐름에서 생성한 프레임보다 블록 프레임이 생성됩니다.

CSS 절대 정위치

절대 정위치는 요소의 위치가 문서 흐름과 무관하기 때문에 공간을 차지하지 않습니다. 이는 상대 정위치와 다릅니다. 상대 정위치는 실제로 일반 흐름 정위치 모델의 일부로 간주됩니다. 왜냐하면 요소의 위치는 일반 흐름 내 위치에 비해 설정되기 때문입니다.

일반 흐름 내 다른 요소의 레이아웃은 절대 정위치의 요소가 없는 것처럼 합니다：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;

아래와 같이 보입니다:

CSS 절대 정위치 예제

절대 정위치 요소의 위치는가장 가까운 정위치된 조상 요소요소가 정위치된 조상 요소가 없다면, 그 위치는최초의 포함 블록

정위치에 대한 주요 문제는 각 정위치의 의미를 기억하는 것입니다. 따라서, 지금까지 배운 것을 되돌아보겠습니다: 상대 정위치는 '문서 내의 초기 위치에 비해'이고, 절대 정위치는 '가장 가까운 정위치된 조상 요소에 비해'입니다. 정위치된 조상 요소가 없다면, '최초의 포함 블록에 비해'입니다.

주의사항:사용자代理에 따라 최초의 포함 블록은 캔버스 또는 HTML 요소일 수 있습니다.

ヒント:절대 정위치의 테이블은 문서 흐름과 관계없기 때문에, 그들은 페이지 상의 다른 요소를 덮을 수 있습니다. 설정을 통해 z-index 속성이 테이블의 배치 순서를 제어합니다.

CSS 절대 정위치 예제

정위치: 절대 정위치
이 예제는 요소를 정위치하기 위해 절대값을 사용하는 방법을 보여줍니다.