div重叠、叠加实例

百度谷歌搜狗

加关注：新浪微博腾讯微博

当前位置：首页 > HTML+CSS > 其他 > 源码

发布时间：2013-09-22 11:09 　来源/作者：藕码网　分类：其他

TAG标签：

摘要：div重叠、叠加实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div重叠、叠加实例</title>
<style>
body{text-align:center;}
.div-relative{position:relative;color:#000;border:1px solid #000;width:500px;height:400px;}
.div-a{ position:absolute;left:30px;top:30px;z-index:100;background:#F00;width:200px;height:100px}
/* 背景为红色 */
.div-b{ position:absolute;left:50px;top:60px;z-index:80;background:#FF0;width:400px;height:200px}
/* 背景为黄色 */
.div-c{ position:absolute;left:80px;top:80px;z-index:70;background:#00F;width:300px;height:300px}
/* 背景为蓝色 */
</style>
</head>
<body>
<p> </p>
<p><a href="http://www.oucode.com/shili/s587.shtml"><strong>DIV层叠</strong></a><strong>实例效果如下：</strong></p>
<div align="center">
	<div class="div-relative">
		<div class="div-a">我背景为红色</div>
	    <div class="div-b">我背景为黄色</div>
	    <div class="div-c">我背景为蓝色</div>
	</div>
</div>
<p><a href="http://www.oucode.com" target="_blank">来源：藕码网</a></p>
</body>
</html>

素材详情
用户评论
相关文章

div重叠、叠加实例
最新评论

验证码:

菜单/ Menu

热门下载/ HOT