집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 두 개의 DIV를 겹치는 방법

CSS를 사용하여 두 개의 DIV를 겹치는 방법

php中世界最好的语言원래의: 2017-11-28 11:52:094326검색

DIV 겹침을 구현하고 원하는 순서대로 겹치게 하려면 CSS의 절대 위치 지정이 필요합니다. 오늘은 CSS 겹침 스타일 구현 방법에 대해 설명하겠습니다.

DIV 겹침 CSS를 사용하면 DIV가 겹칠 수 있습니다. CSS는 두 개의 DIV 또는 여러 DIV가 순서대로 겹칠 수 있도록 합니다.

DIV가 원하는 순서로 겹칠 수 있도록 하려면 CSS, 즉 CSS 절대 위치 지정이 필요합니다.

겹치는 스타일에는 기본 CSS 스타일 설명이 필요합니다

1, z-index 겹치는 순서 속성

2, position:relative 및 position:absolute 개체 속성을 위치 지정 가능(겹침 가능)으로 설정

3, left right top bottom절대 위치 지정 특정 위치 설정

Coordinated styles

1, css width

2, css height

3, Background 효과를 관찰하기 위해 DIV별로 배경색을 다르게 설정했습니다. 구별해 보세요

다음으로 여러분이 원하는 대로 겹쳐서 겹칠 수 있는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!