Position:absolute를 적용하면 Float:right가 작동을 멈추는 이유는 무엇입니까?

부동 및 절대 위치 지정 충돌

웹 레이아웃에서 요소는 부동 및 절대 위치 지정을 포함하여 다양한 방법으로 위치를 지정할 수 있습니다. 그러나 동일한 요소에 부동 위치 지정과 절대 위치 지정을 모두 사용하면 충돌이 발생할 수 있습니다.

div 요소가 상위 div의 오른쪽 가장자리에 남아 있기를 원하는 상황을 생각해 보세요. float:right를 사용하면 일반적으로 이러한 결과를 얻을 수 있습니다. 그러나 동일한 div에 position:absolute도 적용하면 float 속성이 무효화되고 div가 상위 요소의 왼쪽 가장자리로 이동합니다.

이 동작의 이유는 절대 위치 지정이 요소를 제거하기 때문입니다. 문서의 정상적인 흐름. position:absolute가 적용되면 브라우저는 요소의 새로 설정된 절대 좌표와 결합하여 모든 부동 속성을 해석합니다. 따라서 float:right는 더 이상 상위 div와 관련하여 요소의 위치에 영향을 주지 않습니다.

이 충돌을 해결하고 div를 오른쪽으로 정렬하려면 대신 올바른 속성을 사용하여 position:absolute를 적용하세요.

<code class="css">position:absolute;
right: 0;</code>

상위 요소의 위치를 ​​상대 위치로 설정하는 것도 잊지 마세요.

<code class="css">position:relative;</code>

이 접근 방식을 사용하면 문서 흐름 내에서 위치를 유지하면서 요소가 상위 요소의 오른쪽 가장자리에 절대 위치를 유지하게 됩니다.

위 내용은 Position:absolute를 적용하면 Float:right가 작동을 멈추는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!