웹 프론트엔드 면접 질문 8번 - 절대 포지셔닝과 상대 포지셔닝

상대적 위치 지정(relative):

먼저 상대 위치 지정에 대해 이야기해 보겠습니다. 이름처럼 상대적인 참조 개체가 있어야 하지만 이 참조는 다른 것이 아닙니다. 원본 문서 흐름에서 자신의 위치입니까? 상대 위치 지정 후 개체 는 문서 흐름에서 완전히 분리되지 않고 문서에서 이 개체의 원래 위치는 유지되며(똥을 흘리지 않고 변기에 서 있음) 오프셋 개체가 을 대체합니다. 다른 객체와 함께 레이어를 마스크합니다.

상대 위치 지정 특성을 정리하면 다음과 같습니다.

①상대적으로 위치하는 요소의 경우 너비가 설정되지 않은 경우 너비는 브라우저 전체의 너비이거나, 상위 요소의 너비에 따라 달라집니다.

② 상대적으로 배치된 블록 요소는 원래 위치를 기준으로 이동하지만 여전히 문서 흐름의 위치를 ​​차지하고 다른 요소의 레이아웃에는 영향을 주지 않습니다.

다음은 코드를 통해 확인됩니다

브라우저에 서로 다른 색상으로 표시된 5개의 상자를 배치하면 코드는 다음과 같습니다

HTML 코드

CSS 코드

초기 렌더링

세 번째 상자의 상대 위치 설정

요소는 원래 위치를 기준으로 오프셋되며 너비와 높이는 변경되지 않고 유지됩니다. 컨테이너의 레이아웃에 영향을 주지 않고 문서 흐름에서 원래 위치를 차지합니다. 다른 요소.

절대 위치 (절대):

절대 위치 지정 개체는 문서 흐름에서 분리됩니다. 절대 위치 지정의 기준 위치는 상위 또는 상위 위치에 있는지에 따라 달라집니다. 왼쪽을 사용하세요. right, top, bottom 등 속성 은 상대 또는 절대 위치 지정 설정이 있는 가장 가까운 상위 개체를 기준으로 절대값입니다. , 상위 개체가 위치 지정 속성을 설정하지 않으면 html 루트 요소를 기준으로 위치가 지정됩니다. 일부 게시물을 읽은 후 일부 사람들은 상위 개체가 위치 지정 속성을 설정하지 않으면 위치가 지정될 것이라고 생각하는 것으로 나타났습니다. 신체와 관련하여 이 진술은 잘못되었습니다.

절대 위치 지정의 특징은 다음과 같습니다.

① 절대 위치 지정 블록 요소의 너비가 지정되지 않은 경우 요소 내부의 내용에 따라 너비가 결정됩니다. 🎜>

②분리 후 원래 위치는 비어 있는 것과 같으며, 다음 요소가 해당 위치를 차지합니다.

③절대 위치에 있는 개체를 기준으로 설정합니다. 자신과 가장 가까운 상위 개체를 상대 위치 또는 절대 위치로 위치 지정

④ 상위 요소의 위치가 지정되지 않은 경우 html 루트 요소를 기준으로 위치 지정

다음은 여전히 ​​이 5개를 사용합니다. 각 상자의 오프셋을 확인하는 데 사용됩니다.

(1) 블록 요소에는 오프셋 값이 없습니다.

위의 5개 상자는 box5에 절대 위치 지정만 제공하고 오프셋 값이 없습니다. 이때 블록 요소는 원래 위치에 떠 있을 뿐입니다. 블록 요소가 뒤에 있으면 문서 흐름에서 해당 위치를 차지하게 됩니다. box5 아래에 box6을 추가하여 효과를 살펴보겠습니다.

참고: 절대 위치에 있는 블록 요소의 너비가 정의되지 않은 경우 너비는 요소 내부의 콘텐츠에 따라 결정됩니다.

표현은 다음과 같습니다

상자 추가 효과6

사진에서 알 수 있듯이, box6이 사용되었습니다. 문서 흐름에서 box5의 위치입니다.

(2) 오프셋 값이 있습니다

오프셋 값이 설정되어 있고 상위 요소가 상대 위치 또는 절대 위치를 설정하지 않은 경우 해당 요소는 루트 요소를 기준으로 위치가 지정됩니다(예: html 요소, 본문이 아닌 루트 요소를 기준으로 함) 확인하려면 box5의 오프셋을 사용하세요.

①box5에 오프셋을 제공합니다. 상위 요소에는 상대 또는 절대 위치가 없습니다

렌더링은 다음과 같습니다

②box5에 동일한 오프셋을 부여하고 body 요소에 절대 위치 지정(body 요소 설정의 경우) 절대 위치 지정, 절대 위치 지정 블록 요소의 너비는 가장 긴 p에 의해 결정되고 너비는 줄어듭니다.):

렌더링은 다음과 같습니다

사진앱에서 전송

위 두 렌더링 중, 루트 요소를 기준으로 한 위치 지정은 본문을 기준으로 한 위치 지정과 다릅니다. 주요 차이점은 본문의 여백 값을 포함하는지 여부입니다.

다음으로, 5개의 상자 밖에 상위 상자 3개를 더 중첩하고, 이 3개의 상위 상자에 위치를 지정하여 가장 최근에 배치된 상위 요소를 기준으로 오프셋되었는지 확인합니다.

코드는 다음과 같습니다

HTML코드

CSS 코드

렌더링

앱 사진

위에서 보면 box5가 가장 가까운 컨테이너인 세 번째 레이어 컨테이너를 기준으로 배치되어 있음이 분명합니다. 관심이 있으시면 시도해 보고 세 번째 레이어 컨테이너의 위치를 ​​제거하여 두 번째 레이어 컨테이너를 기준으로 위치가 지정되었는지 확인할 수 있습니다. 확인했으며 사진은 게시하지 않겠습니다.

왜 가장 바깥쪽 상자를 절대 위치로 설정하고 다른 두 상자를 상대 위치로 설정해야 하는지 묻는 학생들이 있습니다. 이 위치 지정 방법의 차이는 주로 상자의 너비와 블록 요소의 상대적 위치에 영향을 미칩니다. 너비가 설정되지 않은 경우 해당 너비는 기본 브라우저 너비입니다. 부모 요소가 있는 경우 너비는 부모 요소에 의해 결정됩니다. 이 블록 요소의 내용이 너무 많으면 부모 요소도 크게 유지됩니다. .

즉, 상대적으로 배치된 블록 요소의 너비는 상위 요소에 따라 달라집니다. 그러면 이 세 컨테이너를 절대 위치로 설정하면 어떤 효과가 있을까요? 렌더링

사진은 앱에서 가져온 것입니다

사진에서 볼 수 있듯이 3층 컨테이너의 너비는 더 이상 렌더링에 의존하지 않습니다. 부모 요소는 문서에서 변경되기 때문에 흐름에서 분리되어 독립적이며 너비는 내용에 의해서만 결정될 수 있습니다. 요약하면, 절대 위치 블록 요소의 너비는 자체 내용에 따라 결정됩니다. 상대적 위치 블록 요소의 너비가 설정되지 않은 경우 기본값은 브라우저 너비입니다. 그러나 너비에 관계없이 절대 위치 지정 요소는 위치 지정을 위해 자신에게 가장 가까운(절대 또는 상대 위치 지정) 상위 요소를 찾습니다.

요약:

상대적: 위치 지정은 자체 위치를 기준으로 합니다. (오프셋을 설정할 때 자체 위치 오프셋을 기준으로 합니다. ). 상대적으로 설정된 요소는 여전히 문서 흐름에 있고 요소의 너비와 높이는 변경되지 않고 유지되며 오프셋 설정은 다른 요소의 위치에 영향을 주지 않습니다. 가장 바깥쪽 컨테이너는 상대 위치로 설정됩니다. 너비가 설정되지 않은 경우 너비는 전체 브라우저의 너비입니다.

절대: 절대 또는 상대 위치로 설정된 요소에 가장 가까운 상위 요소를 기준으로 위치가 결정됩니다. 절대 또는 상대 위치로 설정된 상위 요소가 없는 경우 요소는 루트 요소를 기준으로 배치됩니다. , 이는 html 요소입니다. 절대값이 설정된 요소는 문서 흐름에서 벗어납니다. 요소의 너비가 설정되지 않은 경우 요소 내부의 내용에 따라 너비가 결정됩니다. 분리 후 원래 위치는 비어 있는 것과 동일하며 다음 요소가 해당 위치를 차지합니다.

참고: 이 기사의 실험 결과는 상위 요소와 하위 요소가 고정 너비로 ​​설정되지 않은 경우 얻은 것입니다. 상위 요소가 고정 너비로 ​​설정된 경우 해당 하위 요소는 관계없이 배치됩니다. 절대 위치 또는 상대 위치. 어떤 하위 요소도 상위 요소의 너비를 초과할 수 없습니다. 상위 요소는 상위 요소이며 누구도 그를 초과할 수 없습니다.

위 내용은 웹 프론트엔드 면접 질문 8번 - 절대 포지셔닝과 상대 포지셔닝의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!