手机
当前位置:查字典教程网 >网页设计 > 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代码

DIV点击折叠实例代码

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

CSS布局教程:绝对定位和相对定位

div图片marquee无缝连接实现代码

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

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

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

CSS3正方体旋转示例代码

CSS3 实用技巧:实现黑白图像效果示例代码

精品推荐
分类导航