多个DIV在同一个位置层叠

最新推荐文章于 2023-11-27 16:16:01 发布

adindefinite

最新推荐文章于 2023-11-27 16:16:01 发布

阅读量5.5k

点赞数 3

分类专栏： Web

本文链接：https://blog.csdn.net/qq_39307284/article/details/89393266

版权

Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在编写个人简历网站时，为了实现点击按钮在同一位置出现对应的专业技能具体情况的效果，要将多个DIV通过CSS效果层叠在同一位置。点击按钮A，A的专业技能div显示，其他div隐藏；点击按钮B，B的专业技能div显示，其他div隐藏（该效果要添加js脚本实现），以此类推。

演示如下：
首先新建四个盒子
id:div_relative作为父元素，是一个大的DIV盒子
id:a,b,c作为子元素，是三个小的DIV盒子，存放于第一个大DIV盒子内

<!DOCTYPE html> 
<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>div重叠</title> 
	<style type="text/css"> 
		.div-relative{
			position:relative;
		 	color:#000000; 
		 	border:1px solid #000000; 
		 	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:#FF00; 
			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>

实现效果如图：
在这里插入图片描述

如果要实现完全覆盖层叠，需要保证三个DIV大小都一样，只需要在父DIV的CSS中加上position:relative;，子DIV的CSS中加上positon:absolute;，为了体验效果，在子DIV中应该设置背景色，否则初始状态就会显示所有子div的所有内容。

完工！

adindefinite

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
多个DIV在同一个位置层叠

在编写个人简历网站时，为了实现点击按钮在同一位置出现对应的专业技能具体情况的效果，要将多个DIV通过CSS效果层叠在同一位置。点击按钮A，A的专业技能div显示，其他div隐藏；点击按钮B，B的专业技能div显示，其他div隐藏（该效果要添加js脚本实现），以此类推。演示如下：首先新建四个盒子id:div_relative作为父元素，是一个大的DIV盒子id:a,b,c作为子元素，是三个小...
复制链接

扫一扫