CSS 위치에 대한 자세한 설명: 절대, 상대_경험 교환

CSS2.0 핸드북에 대한 설명:

이 속성 값을 절대값으로 설정하면 개체가 일반 문서 흐름에서 벗어나 주변 콘텐츠의 레이아웃에 관계없이 개체가 절대적으로 배치됩니다. 다른 Z-인덱스 속성을 가진 다른 개체가 이미 특정 위치를 점유하고 있는 경우 서로 영향을 미치지 않으며 동일한 위치에서 겹칩니다. 이때 개체에는 외부 패치(margin)가 없지만 내부 패치(padding)와 테두리(border)가 있습니다.
객체의 절대 위치 지정을 활성화하려면 왼쪽, 오른쪽, 위쪽, 아래쪽 속성 중 하나 이상을 지정하고 이 속성의 값을 절대값으로 설정해야 합니다. 그렇지 않으면 위 속성은 기본값인 auto 를 사용하여 객체가 일반적인 HTML 레이아웃 규칙을 따르고 이전 객체 바로 다음에 렌더링되도록 합니다.

TRBL 속성(TOP, RIGHT, BOTTOM, LEFT)은 position 속성이 설정된 경우에만 유효합니다.
position:absolute 설정 시
부모(무한)가 위치 속성을 설정하지 않으면 현재 절대값이 TRBL 속성과 결합되어 브라우저의 왼쪽 상단이 원래 지점으로 위치하게 됩니다.
상위(무한))가 위치 속성을 설정하는 경우 현재 절대값은 TRBL 속성과 함께 상위(가장 가까운)의 왼쪽 위 모서리를 원래 점으로 사용하여 배치됩니다.

위치: 상대
가 설정되면 상위(가장 가까운) 콘텐츠 영역의 왼쪽 상단이 원본 지점으로 참조되고 위치 지정을 위해 TRBL 속성과 결합됩니다(또는 위치가 지정된 요소를 기준으로). 부모 콘텐츠 영역 이전 요소는 오프셋), 부모가 없으면 BODY의 왼쪽 상단이 원점으로 사용됩니다. 상대 위치 지정은 중첩될 수 없습니다. 상대 위치 지정을 사용하는 경우 요소의 이동 여부에 관계없이 요소는 여전히 원래 공간을 차지합니다. 따라서 요소를 이동하면 해당 요소가 다른 상자를 덮게 됩니다.

일반적으로 웹페이지를 중앙에 배치하기 위해 Absolute를 사용하면 실수하기 쉽습니다. 왜냐하면 웹페이지는 항상 자동으로 해상도의 크기에 맞춰져 있고 Absolute는 페이지의 왼쪽 상단을 사용하기 때문입니다. 브라우저는 원래 지점으로 설정되며 해상도 변경에 따라 위치가 변경되지 않습니다. 때로는 컨테이너의 상하 관계를 설정하기 위해 z-index에 의존해야 할 때도 있습니다. 값이 클수록 위쪽에 있는 값이 자연수입니다. 물론 한 가지 주의할 점은 z-index를 사용하여 부모-자식 관계를 설정 및 설정할 수 없다는 점입니다. 자식은 맨 위에 있어야 하고 부모는 맨 아래에 있어야 합니다.

이 속성 값을 상대값으로 설정하면 개체가 일반 HTML 흐름으로 유지되지만 위치는 이전 개체를 기준으로 오프셋될 수 있습니다. 상대적으로 배치된 객체 뒤에 오는 텍스트나 객체는 배치된 객체의 자연스러운 공간을 덮어쓰지 않고 자체 공간을 차지합니다. 대조적으로, 절대적 위치에 있는 개체 뒤에 오는 텍스트나 개체는 위치가 지정된 개체가 일반 문서 흐름 밖으로 드래그될 때까지 자연스러운 공간을 차지합니다. 절대 위치에 있는 개체를 가시 영역 외부에 배치하면 스크롤 막대가 나타납니다. 가시 영역 외부에 상대적으로 위치가 지정된 개체를 배치하면 스크롤 막대가 나타나지 않습니다. 실제로 포지셔닝의 주요 문제는 각 포지셔닝의 의미를 기억하는 것입니다. 상대 위치 지정은 문서 흐름에서 요소의 초기 위치를 "기준"하는 반면, 절대 위치 지정은 이미 위치가 지정된 가장 가까운 상위 요소를 "기준"합니다.

다음은 보충입니다.

CSS의 절대 위치(absolute)와 상대 위치(relative)를 알고 있지만 관련 효과를 직접 작성한 적은 없습니다. .
오랜 작업 끝에 드디어 완성! 나는 또한 이 두 가지 속성을 조금 더 잘 이해했습니다!

요약은 다음과 같습니다.

우선 아래 레이어 구조를 살펴보겠습니다

이 레이어는 위치: 상대 스타일만 적용합니다.

이 레이어는 위치: 절대 스타일만 적용합니다.

스타일 없음

1. 절대: 공간을 차지하지 않고, 상대: 공간을 차지합니다!

상위 구조 예:

ID가 rel인 레이어는 표시 시 한 줄을 차지합니다! 그 뒤에 있는 ABS 레이어는 다음 줄에만 표시됩니다!
abs라는 ID를 가진 레이어가 표시되면 sss라는 ID를 가진 레이어와 겹칠 것입니다!

2. 기본적으로(위치 지정은 상단과 결합되지 않음 등) 절대 위치 지정은 상위 레이어를 기준으로 합니다.
예를 들어 위 ID의 레이어가 ABS인 경우 그렇지 않은 경우 top 등으로 배치하면 표시 위치는 상위 위치 레이어를 따릅니다. (위치는 문서의 왼쪽 하단에 있으며 역시 왼쪽 하단에 위치합니다.)

3. 결합할 때 상단, 하단, 오른쪽, 왼쪽 및 기타 속성, 절대 위치 지정)은 창을 위치 지정으로 사용하고 상대는 자체 점유를 오프셋의 기준으로 사용합니다! 다음과 같습니다:

스타일이 적용되지 않습니다.

이 레이어는 position:relative; 하단: 30px; 스타일

이 레이어는 위치: 절대; 하단: 30px; 스타일

위 코드: id가 rel인 레이어는 위로 이동하여 ID가 ​​sss인 레이어와 겹칩니다.
id가 abs인 레이어는 다음과 같이 창을 사용하여 창에서 30픽셀 떨어진 위치로 이동합니다. 기준!

4. 위쪽, 아래쪽, 오른쪽, 왼쪽 및 기타 속성을 결합할 때 상위 레이어를 위치 기준으로 사용하도록 절대 위치를 지정하려면 상위 레이어에 절대 또는 상대 속성을 적용하면 됩니다! :

이 레이어는 위치: 상대: 30px 스타일을 적용합니다.

이 레이어는 위치: 절대; 하단: 30px; 스타일

위 코드: id posi 레이어의 경우 절대 속성을 사용할 수도 있습니다!
ID가 rel인 레이어는 영향을 받지 않으며 자체 점유를 기준으로 사용하여 상쇄됩니다!

id가 abs인 레이어는 id가 있는 posi 레이어의 아래쪽 가장자리를 위치 기준선으로 사용합니다. 이때 posi 레이어의 높이가 30px 미만인 경우 abs 레이어가 작동하지 않을 수 있습니다. 보이는!