手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >通过绝对定位实现div重叠实例代码
通过绝对定位实现div重叠实例代码
摘要:div重叠叠加实例未排层叠顺序www.divcss5.com.div-relative{position:absolute;color:#0...

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title>

<style>

.div-relative {position: absolute;color: #000;border: 1px solid #000;width: 500px;height: 400px;right: 0;bottom: 0;}

.div-a {position: absolute;left: 30px;top: 30px;background: #F00;width: 200px;height: 100px}

.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;}

</style>

</head>

<body>

<div>

<div>我背景为红色</div>

<div>我背景为黄色</div>

<div>我背景为蓝色</div>

</div>

</body>

</html>

【通过绝对定位实现div重叠实例代码】相关文章:

DIV点击折叠实例代码

练习层DIV的定位小实例

css div绝对定位与固定定位实例

通过position定位实现div底端对齐

多步骤进度条的实现原理及代码

css3隔行变换色实现示例

CSS3制作loading加载动画效果代码

通过css加载远程字体示例代码

通过浮动+定位实现两个div在同一行

相邻div实现一个跟着另一个自适应高度示例代码

精品推荐
分类导航