CSS를 사용하여 두 개의 DIV를 겹치는 방법-CSS 튜토리얼-php.cn

다음으로 여러분이 원하는 대로 겹쳐서 겹칠 수 있는 DIV 레이아웃 예시를 제공해 드리겠습니다. 4개의 새로운 DIV 상자, CSS 이름이 ".div-relative"인 하나의 큰 DIV 상자, 첫 번째 큰 DIV 개체 상자에 배치된 세 개의 작은 DIV 상자를 만들고 DIV 이름은 ".div-a", ".div입니다. -b", ".div-c".

정렬되지 않은 정렬된 DIV 연속 및 중첩 예제

전체 HTML 소스 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title> 
<style> 
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px} 
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px} 
/* css注释说明： 背景为红色 */ 
.div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px} 
/* 背景为黄色 */ 
.div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px} 
/* DIV背景颜色为蓝色 */ 
</style> 
</head> 
<body> 
<div class="div-relative"> 
<div class="div-a">我背景为红色</div> 
<div class="div-b">我背景为黄色</div> 
<div class="div-c">我背景为蓝色</div> 
</div> 
</body> 
</html>

예제 설명:

절대 위치 지정을 달성하기 위해 position을 사용하고 position:relative 속성을 상위 항목으로 설정합니다. , 자식은 position:absolute에 왼쪽 또는 오른쪽, 위쪽 또는 아래쪽을 설정하여 부모 내에서 자식의 임의 위치를 지정합니다. 원래의 경우 DIV 코드 자체의 순서대로 겹치는 부분이 배열됩니다. DIV 상자를 나중에 입력할수록 앞쪽에 가까워집니다(상단에 떠 있음). 소스 코드 자체에서 div 코드의 html 순서를 변경하는 것 외에도 CSS z-index를 사용하여 DIV 레이어의 순서를 구현할 수도 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 기사

CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.