让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。

重叠样式需要主要CSS样式解释
1、z-index 重叠顺序属性
2、position:relativeposition:absolute设置对象属性为可定位(可重叠)
3、left right top bottom绝对定位具体位置设置

配合的样式
1、css width
2、css height
3、background 为了观察效果,我们对不同DIV设置不同背景颜色进行区别

新建4个DIV盒子,一个大的DIV盒子,CSS命名为“.div-relative”,三个小DIV盒子放于第一个大DIV对象盒子内,DIV命名分别为“.div-a”、“.div-b”、“.div-c”。

一、未排序、为排顺序DIV层叠重叠实例

1、如下:

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title>
     <style>
         .div-relative{position:relative; color:#; border:1px solid #; 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:#FF0; 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> 

2、截图


实现DIV层层叠重叠(未排顺序)实例截图

在原始情况下重叠是按DIV代码本身顺序排列,越后输入的DIV盒子其越靠前(浮在上面)。除了改变源代码本身div代码在html顺序,我们还可以使用css z-index实现DIV层排列顺序。

二、通过CSS控制DIV重叠顺序

我们使用以上绝对定位实例代码,只需要对“.div-a”、“.div-b”、“.div-c”分别加入z-index样式即可实现任意顺序排列。

扩展知识:
z-index的值为正整数值,数字越大对应对象层越浮上层(越靠前。

以上实例默认顺序是“.div-c”浮在最上层(蓝色背景层)、“.div-b”浮在中层(黄色背景层)、“.div-a”排最底层(红色背景层)。我们接下来使用z-index样式在不改变html代码情况下实现顺序颠覆,“.div-b”浮在中层(黄色背景层)排序不变,实现“.div-a”浮在最上层(红色背景层)、“.div-c”排最底层(蓝色背景层)。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>div重叠 叠加实例 排层叠顺序 www.divcss5.com</title>
     <style>
         .div-relative{position:relative;color:#;border:1px solid #;width:500px;height:400px}
         .div-a{ position:absolute;left:30px;top:30px;z-index:;background:#F00;width:200px;height:100px}
         /* div背景色为红色 */
         .div-b{ position:absolute;left:50px;top:60px;z-index:;background:#FF0;width:400px;height:200px}
         /* 背景为黄色 */
         .div-c{ position:absolute;left:80px;top:80px;z-index:;background:#00F;width:300px;height:300px}
         /* 背景为蓝色 */
     </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> 

2、截图


实现红背景的“div-a”与蓝色背景“div-c”层叠顺序替换实例截图

ok

【html】【9】div布局[div层叠]的更多相关文章

  1. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  2. 小div布局之卡片堆叠(card-stacking)

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  3. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  4. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  5. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  6. DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  7. DIV布局之道二:DIV块的嵌套,DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  8. DIV布局之道一:DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  9. CSS技巧!像table一样布局div

    摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个 ...

随机推荐

  1. D3数据绑定

    这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a b ...

  2. java 多线程—— 线程让步

    java 多线程 目录: Java 多线程——基础知识 Java 多线程 —— synchronized关键字 java 多线程——一个定时调度的例子 java 多线程——quartz 定时调度的例子 ...

  3. 解决HtmlAgilityPack无法获取form标签子节点的问题

    问题描述 今天使用HtmlAgilityPack提取Form表单下的input节点,发现提取的form节点没有子节点,InnerHtml也是为空,起初以为是标签不全导致,后来分析html代码发现不可能 ...

  4. 第30条:用enum代替int常量

    在java1.5之前,表示枚举类型的常用模式是声明一组具名的int常量,每个类型成员一个常量: public static final int APPLE_FUJI = 0; public stati ...

  5. 测试MySQL事务管理

    1.MySQL 版本 mysql> select version(); +------------+ | version() | +------------+ -log | +--------- ...

  6. Linux下Bash运行脚本

    命令行应该这样写: sh -c "脚本字符串" example: sh -c "if ! type dpkg > /dev/null ; then echo 'so ...

  7. Redis启动多端口,运行多实例(转)

    使用redis在同一台机器上,启用多个端口,实现多个实例,完成集群的模拟实现. 启动多实例 redis默认启动端口为6379,我们可以使用 --port 来指定多个端口,如下,在linux终端命令: ...

  8. Deformable Convolutional Networks-v1-v2(可变形卷积网络)

    如何评价 MSRA 视觉组最新提出的 Deformable ConvNets V2? <Deformable Convolutional Networks>是一篇2017年Microsof ...

  9. [2018HN省队集训D1T1] Tree

    [2018HN省队集训D1T1] Tree 题意 给定一棵带点权树, 要求支持下面三种操作: 1 root 将 root 设为根. 2 u v d 将以 \(\operatorname{LCA} (u ...

  10. RHCSA-day3

    10.配置LDAP客户端 在classroom.example.com上已经部署了一台LDAP认证服务器,按以下要求将你的系统加入到该LDAP服务中,并使用Kerberos认证用户密码: 该LDAP认 ...