위치 지정 속성 위치에 대한 자세한 설명: 상대 및 절대

위치 지정 태그: position

에는 속성 포함 : 상대(상대)

                                                                                                                                      요소가 상대적으로 배치된 경우 먼저 요소를 상대적으로 배치합니다. 해당 위치에 나타납니다. 그런 다음 수직 또는 수평 위치를 설정하여 원래 시작점을 기준으로 요소를 이동합니다. (한 가지 더, 상대 위치 지정 시 이동 여부에 관계없이 요소는 여전히 원래 공간을 차지합니다. 따라서 요소를 이동하면 다른 상자를 덮게 됩니다.) 일반적인 문서 흐름이며 요소는 원래 위치를 기준으로 위치 지정의 경우 원래 자리 표시자 정보가 여전히 존재합니다.

2.position:absolute;는

절대 위치 지정

을 의미하며 위치는 브라우저의 왼쪽 상단 모서리. 절대 위치 지정은 문서 흐름에서 요소를 제거하므로 공간을 차지하지 않습니다. 일반적인 문서 흐름의 요소는 절대 위치에 있는 요소가 없는 것처럼 배치됩니다. (절대적으로 배치된 상자는 문서 흐름과 아무 관련이 없기 때문에 페이지의 다른 요소를 덮을 수 있으며 계층 순서는

z-index

를 통해 제어할 수 있습니다. Z-색인이 높을수록 더 높게 나타납니다.) 절대 위치 지정: 재계는 문서 흐름 및 플로팅모델과 분리되어 있으며 자리 표시자 없이 다른 개체와 독립적으로 존재합니다.

3. 상위 컨테이너가 상대 위치 지정을 사용하고 하위 요소가 절대 위치 지정을 사용한 후 하위 요소의 위치는 더 이상 브라우저의 왼쪽 위 모서리를 기준으로 하지 않고 상위 창의 왼쪽 위 모서리를 기준으로 합니다. 다음과 같은 구체적인 사례 설명:

1. c가 b에 중첩되고 b와 c가 모두 상대적으로 배치된 경우 c의 상대적 위치 지정은 b를 기준으로 하며 b는 자리 표시자 정보를 유지하고 b는 c의 자리 표시자 정보를 유지합니다.

2. c가 b에 중첩되고 b가 절대적으로 위치하고 c가 상대적으로 위치하는 경우 b는 float가 아니며 자리 표시자 정보가 없는 반면 c는 b를 기준으로 위치가 지정되고 자리 표시자는 b에 나타납니다.

3. a, b, c, d가 병치되어 있고 그룹 ID가 있는 div에 모두 중첩되어 있고

#group{potision:relative;

height

:200px;width:4oopx;}                                            ;왼쪽:20px; top:20px;}

이 방법에서는 상위 요소의 상대적인 위치는 지정되지만 left와 top의 값은 설정되지 않습니다. 플로팅 객체로 간주할 수 있으며 b는 절대 위치이므로 그렇지 않습니다. 공간을 차지하지 않지만 상위 요소가 상대적으로 위치 지정되므로 여기서 절대 위치 지정은 브라우저를 기준으로 한 것이 아니라 상위 요소를 기준으로 한 절대 위치 지정이 됩니다.

예:

<div id="main">
<div id="a">aaaaaaaaaa</div>
<div id="b">bbbbbbbb</div>
</div>

(1) position:absolute를 a로 설정하면 a는 일반적인 문서 흐름에서 분리되어 a는 위치를 차지하지 않게 됩니다. 즉, b는 더 이상 a를 기반으로 하지 않지만, 부모로부터 직접 위치가 지정됩니다. (b 위치는 a가 없는 것과 동일합니다).

a에 position:relative가 설정된 경우(문서 흐름에서 벗어나지 않고) a가 위치를 차지하며 A는 원래 위치를 기준으로 위치가 지정되고 기본에 떠 있는 것처럼 보입니다. a의 영향을 받지 않고 원래 방식으로 진행됩니다. (b의 위치는 a에 position 속성이 없는 경우와 동일합니다.)

(2) main에 대해 position:relative/absolute를 설정하면 내부 a 또는 b의 절대 위치 또는 상대 위치는 상위 요소 main을 기준으로 합니다. , 그런 다음 상대 또는 절대 방법에 따라 위치를 지정합니다.
참고: 상위 요소가 유효한 너비 및 높이 값을 설정하지 않은 경우 b는 그룹에 있는 마지막 요소의 오른쪽 상단을 기준으로 절대적으로 위치가 지정됩니다. 너비와 높이를 설정해야 합니다! ! ! ! ! !

위 내용은 위치 지정 속성 위치에 대한 자세한 설명: 상대 및 절대의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!