手机
当前位置:查字典教程网 >网页设计 > 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重叠实例代码】相关文章:

让网站变灰的css代码

css按钮自适应实现原理及代码

div内table居中实现代码

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

连续循环向上滚动代码

实现CSS3中的border-radius(边框圆角)示例代码

固定宽高且DIV绝对居实现思路及示例

CSS3正方体旋转示例代码

CSS定义标题的实例讲解

css实现文字层浮在图片之上示例代码

精品推荐
分类导航