오른쪽 부동 및 절대 위치 지정 문제 해결

부모 오른쪽에 원활하게 정렬되는 동시에 회피하는 div를 추구합니다. 다른 콘텐츠가 중단되면 장애물을 발견하게 됩니다: float:right 및 position:absolute.

Float 및 Absolute의 특성 충돌

Float:right 다른 요소를 왼쪽으로 밀어 요소를 컨테이너 오른쪽에 배치합니다. 그러나 position:absolute는 문서의 일반적인 흐름에서 요소를 제거하여 컨테이너 레이아웃과 관계없이 페이지의 어느 위치에나 배치할 수 있도록 합니다.

float:right와 position:absolute를 결합하면 절대 위치 지정이 우선하므로 요소가 부동 위치를 무시하고 임의로 정렬됩니다.

딜레마

div가 오른쪽에 정렬되도록 하려면 float:right를 삭제하면서 절대 위치 지정 속성을 활용할 수 있습니다. 다음 CSS 코드는 이를 달성합니다:

position: absolute;
right: 0;

이 코드는 div를 절대적으로 배치하고 오른쪽 가장자리를 값 0인 상위 컨테이너의 오른쪽에 고정합니다.

추가 팁

절대 위치 지정이 올바르게 작동하도록 하려면 상위 요소에 위치:상대 설정이 있는지 확인하세요. 이렇게 하면 부모가 절대 위치 지정을 위한 포함 블록으로 설정되어 div가 해당 경계 내에 고정될 수 있습니다.