내 절대 위치 요소가 기본적으로 페이지 왼쪽 상단에 표시되는 이유는 무엇입니까?

CSS(Cascading Style Sheets)의 절대 위치 지정

CSS에서 절대 위치 지정을 사용하면 특정 픽셀을 사용하여 상위 컨테이너 내 요소를 이동할 수 있습니다. 또는 백분율 값. 그러나 절대 위치 지정과 관련된 문제가 발생하면 실망스러울 수 있습니다. 절대 위치 지정과 관련된 일반적인 문제와 해당 솔루션을 살펴보겠습니다.

문제:

부모를 기준으로 절대 위치에 요소를 배치하려고 하면 요소의 배치가 실패하고 기본적으로 페이지 왼쪽 상단에 배치됩니다.

코드 샘플:

<div>
<p><strong>해결책:</strong></p>
<p>위치 지정 실패의 원인은 상위 컨테이너가 위치 지정 요소가 아니기 때문입니다. 절대 위치 지정이 있는 요소는 역시 위치 지정되는 가장 가까운 조상인 offsetParent에서 위치가 지정됩니다. 제공된 코드에서는 상위 요소의 위치가 지정되지 않아 하위 요소가 오프셋 상위 요소인 body 요소에서 오프셋됩니다.</p>
<p>해결책에는 상위 div에 상대적인 CSS 속성 position:을 적용하는 작업이 포함됩니다. . 이렇게 하면 상위 요소가 위치 지정 요소가 되어 해당 하위 요소에 대한 offsetParent가 됩니다.</p>
<p><strong>수정된 코드 샘플:</strong></p>
<pre class="brush:php;toolbar:false"><div><p>부모 "패딩 설정" -왼쪽: 20px;" 위치: 상대, 상위 요소 내에 위치 기준점을 설정하여 상위 요소 내에서 하위 요소의 정확한 절대 위치 지정을 보장합니다.</p></div>