자동 여백이 CSS의 절대 위치 지정과 함께 작동하지 않는 이유는 무엇입니까?

자동 여백과 CSS 절대 위치 충돌

CSS에서 절대 위치 속성은 문서의 일반적인 흐름에서 요소를 제거하고 위쪽, 왼쪽, 오른쪽, 아래쪽 속성을 기준으로 위치가 지정됩니다. 하지만 margin-left 및 margin-right 속성이 절대 위치와 함께 auto로 설정된 경우 아무런 효과가 없습니다.

margin-left: auto 및 margin-right: auto 속성이 있기 때문입니다. 포함 블록 내에서 요소를 중앙에 배치하려고 시도합니다. 절대 위치가 있는 요소의 경우 포함 블록은 문서 본문입니다. 하지만 문서 본문 자체에는 너비가 설정되어 있지 않기 때문에 브라우저는 요소가 어디에 중심을 두어야 할지 결정할 수 없습니다.

반면 위치 속성을 상대값으로 설정하면 요소가 제거됩니다. 일반적인 흐름이지만 가상의 상자는 문서 흐름 내에 남아 있습니다. 이 경우 margin-left 및 margin-right가 자동으로 설정되면 여백은 상대적으로 배치된 요소의 경우 여전히 문서 본문인 포함 블록의 너비를 기준으로 계산됩니다. 그러나 문서 본문의 너비가 설정되어 있으므로 브라우저는 요소를 중앙에 배치해야 하는 위치를 올바르게 결정할 수 있습니다.

절대 위치 지정을 사용하여 요소를 중앙에 배치하려면:

대신 margin-left: auto 및 margin-right: auto를 사용하면 left 및 right 속성을 50%로 설정할 수 있습니다. 그러면 문서 본문 내에서 요소가 중앙에 배치됩니다. 요소가 화면에서 벗어나는 것을 방지하려면 상단 및 하단 속성도 지정해야 합니다.

위 내용은 자동 여백이 CSS의 절대 위치 지정과 함께 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!