CSS에서 `위치: 절대`와 `위치: 상대`의 주요 차이점은 무엇입니까?

"위치: 절대"와 "위치: 상대"의 차이점 이해

HTML 요소로 작업할 때 " 위치: 절대" 및 "위치: 상대"는 위치 지정을 제어하는 ​​데 중요합니다. 유사점을 공유하지만 요소 배치에 미치는 영향은 크게 다를 수 있습니다.

위치: 절대

• 웹페이지 레이아웃의 일반적인 흐름에서 요소를 제거합니다.
• 왼쪽, 오른쪽, 위쪽, 아래쪽을 사용하여 위치를 지정합니다. 속성.
• 비정적 위치 또는 문서 본문이 없는 경우 마지막 조상을 기준으로 요소를 배치합니다.
• 주변 요소는 절대적으로 배치된 요소를 인식하지 못하므로 다음을 수행할 수 있습니다. 다른 콘텐츠와 겹칩니다.

직위: 상대

• 위치 지정이 전혀 없는 것과 유사합니다.
• 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 사용하여 요소를 정상 위치에서 조금씩 움직입니다.
• 다른 요소는 상대적인 위치를 고려하지만 넛지는 레이아웃에 영향을 주지 않습니다.
• 요소는 그대로 유지됩니다. 문서의 흐름을 고려하여 주변 요소와 겹침을 허용합니다.

예

절대 위치 지정:

<div> <p><strong>친척 위치 지정:</strong></p>
<pre class="brush:php;toolbar:false"><div><p>개발자는 "위치: 절대"와 "위치: 상대"의 차이를 이해함으로써 웹페이지에서 요소의 위치 지정을 정밀하게 제어하고 복잡한 레이아웃을 생성하며 원하는 시각적 효과를 얻을 수 있습니다. 효과.</p></div>