상위 요소를 기준으로 CSS 하위 요소를 배치하는 방법은 무엇입니까?

CSS에서는 위치 속성을 사용하여 상위 요소에 대한 상대 위치 지정 "위치:상대적;" 스타일과 절대 위치 지정 "위치:절대;" 스타일을 설정하여 상위 요소를 기준으로 하위 요소를 배치할 수 있습니다. 자식 요소.

이 튜토리얼의 운영 환경: windows7 시스템, CSS2 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

관련 권장 사항: "프로그래밍 비디오 코스"

css에서 상위 요소에 상대적인 하위 요소의 위치 지정을 구현하는 방법

상위 요소 스타일 설정:

position:relative;

하위 요소 스타일:

position:absolute;

샘플 코드:

html 구조

<div id="div1">
<div id="div2"></div>
</div>

css

#div1{
width:500px;height:500px;
background-color:darkgray;
position:relative;
}
#div2{
width:30px;height:30px;
background-color:red;
position:absolute;
right:20px;
}

Effect

Principle

브라우저 렌더링 HTML을 문서 흐름이라고 하며, 인라인 요소는 인라인으로 렌더링됩니다. div는 하나의 부모와 하나의 자식이 있는 블록 수준 요소입니다. 일반적인 렌더링 결과는 부모 요소가 브라우저의 왼쪽 상단에 있고 자식 요소가 부모 요소의 왼쪽 상단에 있다는 것입니다.

부모 요소를 기준으로 자식 요소의 위치를 ​​지정하려면 위치 속성을 사용해야 합니다.

위치 속성 값

속성 값	설명
absolute	정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다.
relative	일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.

부모 요소를 기준으로 위치 지정을 사용하려면 절대값을 사용해야 하는 이유는 무엇입니까? 절대값은 상위 요소를 기준으로 위치 지정하는 데 사용되므로 상위 요소에 대한 요구 사항이 있습니다. 즉, 상위 요소의 위치가 정적일 수 없습니다. 상위 요소의 위치가 정적이면 계속해서 요소를 검색합니다. 위치가 정적이지 않은 요소를 찾을 때까지 위쪽으로 이동합니다. 이 요소는 상대적으로 배치되므로 상위 요소의 위치를 ​​상대 위치로 설정해야 합니다. 상대 위치는 일반 위치를 기준으로만 배치되기 때문입니다. 소위 문서 흐름의 기본 출력 위치입니다. 오프셋 x 및 y를 설정하지 않고 위치를 상대 위치로 설정하면 상위 요소의 위치가 변경되지 않았습니다.

더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 방문하세요! !

위 내용은 상위 요소를 기준으로 CSS 하위 요소를 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!