CSS로 두 개의 div를 겹치게 만드는 방법

두 개의 div를 CSS와 겹치게 만드는 방법: 먼저 [position:absolute] 속성을 사용하여 div의 절대 위치를 설정한 다음 z-index 속성을 사용하여 상위 레이어에 있는 div를 결정합니다. z-index 속성은 요소의 스택 순서를 지정하는 데 사용됩니다.

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

중요 속성 소개:

위치 속성은 요소의 위치 지정 유형을 지정합니다.

(학습 동영상 공유: css 동영상 튜토리얼)

속성 값:

• absolute 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

• relative 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다.

z-index 속성은 요소의 스택 순서를 지정합니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 나타납니다.

속성 값:

• auto 기본값. 스택 순서는 상위 요소와 동일합니다.

• number 요소의 스택 순서를 설정합니다.

• inherit는 z-index 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.​

코드 구현:

html 코드:

<div id="img_head" >
<img src="img/首页logo.png" class="head">
</div>
<div id="img_head_back">
<img src="img/背景.png" class="back" >
</div>

css 코드:

#img_head{
border: 1px solid #FF0000; 
position:absolute;
width:210px;
height: 210px;
z-index: 20;
left:600px;
top:170px;
text-align: center;
}
#img_head_back{
border: 0px solid #FF0000;
position:absolute;
width: 210px;
height: 210px;
left:600px;
top:170px;
z-index:10;
}

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS로 두 개의 div를 겹치게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!