如果有2个div有重叠，默认是根据html解析顺序，最后加载的优先级最高（浮在最上面）。

问题：

如果想把前面加载的div显示在最上面？关键字：z-index

举例：

--原来的页面：first div是被second div盖住了：

<html>
<head>
<title>Test Div Overlap</title>
<style>
.first{
width: 366px;height: 384px;top:100px;left:100px;
position: relative;/*absolute*/
background-color:#CCCCCC;
text-align:right;
/*
z-index:2;
*/
}

.second{
width: 366px;height: 384px;top:0px;
position: absolute;
background-color:#999999;
}
</style>
</head>
<body>
<div id="first" class="first"><a href="#" title="Overlap by Second">Overlap by Second</a>&nbsp;&nbsp;first</div>
<div id="second" class="second">second&nbsp;</div>
</body>
</html>

解决方案：

1.需要将first的position设置为relative

2.将.first{}里面的z-index:2的注释取消

结果：

发现first div浮在second的上面了。

解释：

默认z-index是0，如果设置了z-index的值高于其他，就可以优先显示。

DIV重叠 如何优先显示（div浮在重叠的div上面）的更多相关文章

  1. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  2. 点击按钮对两个div的隐藏与显示进行切换

    HTML: <button type="button"  id="showHidden">点击切换div的隐藏与显示</button> ...

  3. 多个div独立控制其显示/隐藏

    今天要说一个神奇的html标签op,静态页下可以配合jquery分别控制每个层的显示/隐藏切换. 如果用动态中使用,用文章id做区分就可以了. <html> <head> &l ...

  4. CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  5. Jquery一个slideToggle搞定div的隐藏与显示

    Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...

  6. 承载地图的div如果隐藏再显示，则定位时会定位到页面左上角

    承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.

  7. css：多个div在同一行显示

    使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...

  8. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  9. 当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java Socket网络编程的经典例子(转)

    事实上网络编程简单的理解就是两台计算机相互通讯数据而已,对于程序员而言,去掌握一种编程接口并使用一种编程模型相对就会显得简单的多了,Java SDK提供一些相对简单的Api来完成这些工作.Socket ...

  2. UML精粹4 - 对象图，包图，部署图，用例

    对象图object diagram 对象图是某个时间点上的对象在系统中的快照,也经常被称为实例图.一般在展示组合对象结构时比较有用.例如 组合结构的类图 一个时刻的对象图 包图package diag ...

  3. BOM与DOM

    通常情况下,页面中的JavaScript代码都有一系列可以访问的对象,它们可以分为两组: 当前载入页面所拥有的对象(页面有时也可以叫做文档). 页面以外的事物所拥有的对象(即浏览器窗口和桌面屏幕). ...

  4. IQ推理：红眼睛和蓝眼睛

    题目:  有一个很古老的村子,这个村子的人分两种,红眼睛和蓝眼睛,这两种人并没有什么不同,小孩在没生出来之前,没人知道他是什么颜色的眼睛,这个村子中间有一个广 场,是村民们聚集的地方,现在这个村子只有 ...

  5. 数据结构中很常见的各种树（BST二叉搜索树、AVL平衡二叉树、RBT红黑树、B-树、B+树、B*树）

    数据结构中常见的树(BST二叉搜索树.AVL平衡二叉树.RBT红黑树.B-树.B+树.B*树) 二叉排序树.平衡树.红黑树 红黑树----第四篇:一步一图一代码,一定要让你真正彻底明白红黑树 --- ...

  6. .Net的Excel 导出 格式设置

    添加引用:Microsoft   Excel   11.0   Object   Library ; 添加:using Microsoft.Office.Interop.Excel; 一.打开Exce ...

  7. 为什么C++中空类和空结构体大小为1？（转载）

    原文链接:http://www.spongeliu.com/260.html 对于结构体和空类大小是1这个问题,首先这是一个C++问题,在C语言下空结构体大小为0(当然这是编译器相关的).这里的空类和 ...

  8. WinServer2008R2 部署.NET4.0程序 注意事项

    部署注意事项:   1.IIS应用程序池 集成模式   2.在web.config中的system.webServer下,添加 <modules runAllManagedModulesForA ...

  9. git 代码组织

    在20145306CSAPP2E文件夹下建立相应的文件夹: src:存放源代码文件 include: 存放头文件 bin:存放编译后的目标文件.可执行文件等 lib:存放项目所需的静态库.动态(共享) ...

  10. 【转】Java八种基本数据类型的比较及其相互转化

    java中有且仅有八种基本数据类型,记住就行,共分为四类: 第一类:整型-->byte     short      int     long 第二类:浮点-->float    doub ...