상자가 겹치는 웹 페이지를 수정하는 방법

웹 사이트가 있지만 div 상자가 제대로 정렬되지 않았습니다. 특히 한 웹 사이트에서 다른 웹 사이트로 이동하는 div의 위치 문제를 고려할 때 여러 가지 이유로 발생할 수 있습니다. 마찬가지로, 상자 요소는 위치 오류에서 오버플로 문제 및 간단한 부동 문제에 이르기까지 몇 가지 이유로 겹칠 수 있습니다. 대부분의 경우 웹 사이트의 스타일 시트를 빠르고 쉽게 변경하면 문제가 해결됩니다.

1

상자에 현재 여백이없고 약간만 겹치는 경우 여백을 추가하십시오. 여백 요소를 사용하여 다른 상자 요소를 밀어 내려는 경우 왼쪽과 같이 한쪽에만 여백을 설정할 수 있습니다. 예를 들어, div A와 div B가 나란히 배치되고 div B가 왼쪽에 겹치는 경우 다음과 같이 div A에 왼쪽 여백을 추가하도록 스타일 시트를 수정할 수 있습니다.

2

스타일 시트에서 겹침을 유발할 수있는 위치 값을 검색하고 변경할 수 있습니다. 절대 위치 지정을 사용하여 웹 사이트의 div 요소를 정렬하는 경우 모든 요소가 페이지의 다른 요소와 겹칠 수 있습니다. 따라서 div A를 너비 100 픽셀로 설정하고 페이지 상단과 왼쪽에서 15 픽셀로 설정 한 경우 div A와 겹치지 않도록 div B는 왼쪽으로 115 픽셀 이상이어야합니다. 상단 또는 하단, 오른쪽 또는 왼쪽에서.

특정 너비로 ​​div를 설정하고 오버플로를 숨 깁니다. 이렇게하면 div가 지정된 크기를 초과하는 것을 방지하고 콘텐츠가 넘쳐나는 것을 방지합니다. 예를 들어 div A에 너비가 설정되어 있지 않고 큰 이미지를 넣으면 div가 이미지를 수용하도록 자동으로 확장됩니다. 너비를 설정하면 이미지는 여전히 div의 가장자리를 넘어서 표시되지만 div는 확장되지 않습니다. 오버플로를 숨기면 이미지가 div의 경계 내에서만 표시되고 요소가 확장되지 않습니다. 예를 들어 div A를 200 픽셀 너비로 설정하고 오버플로하지 않으려면 다음 스타일 코드를 사용합니다.

4

"float"옵션을 사용하여 div 상자를 자동으로 나란히 쌓으세요. 예를 들어, div A가 사이드 바 역할을하고 div B가 콘텐츠를 보관하기를 원합니다. 두 div를 모두 왼쪽으로 플로팅하여 가로로 정렬되도록 할 수 있습니다. 부동 div 요소는 겹치지 않습니다. 두 개의 플로팅 요소의 예는 다음과 같습니다.