如果有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. C#微信公众号开发-MVC模式公共类封装

    第一部分:基础配置 第一步:注册微信公众账号 如果开发测试阶段可以打开测试链接地址,注册测试公众号.测试账号除了不能与正式账号通信外其他什么高级接口的都可以实现. 测试号管理地址:http://mp. ...

  2. 【uTenux实验】时间管理（系统时间/周期性处理/警报处理）

    1.系统时间管理 系统时间管理函数用来对系统时间进行操作,是OS的一个基础性的东西.个人认为,设置系统时间和获取系统时间对OS来说基本是可有可无的. uTenux提供了三个系统时间相关API.分别用于 ...

  3. css3立体旋转

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

  4. TCP/UDP的接收包方式

    UDP udp不是流式的,每次接收一个包,长度不超过(65535-28,总包长65535字节,包头28字节).所以UDP方式下不需要填写任何参数直接调用 $client->recv() 即可.注 ...

  5. IT之人生感悟

    从实习到现在,一直在做程序开发,工作了也有1年了吧,日子也就这么浑浑噩噩的过去了,想想将要毕业那会,原本有想考研的打算,最后还是出于各方面考虑不了了之,相比考研族提早步入了社会,既然路是自己选的,那必 ...

  6. 为什么在注册和注销的时候intent要改成隐式调用

    显式意图:调用Intent.setComponent()或Intent.setClass()方法明确指定了组件名的Intent为显式意图,显式意图明确指定了Intent应该传递给哪个组件. 隐式意图: ...

  7. Angular学习

    一.Angular是什么 基于JS的框架,类似JQuery,利用数据绑定和依赖注入实现页面数据的渲染,无需人为写大量的JS,减少了代码量,优美了代码. 二.Angular优缺点 Angular适用与C ...

  8. 常用的SQL分页

    有关分页 SQL 的资料很多,有的使用存储过程,有的使用游标.本人不喜欢使用游标,我觉得它耗资.效率低:使用存储过程是个不错的选择,因为存储过程是经过预编译的,执行效率高,也更灵活.先看看单条 SQL ...

  9. Maven实战（四）生命周期

    1. 三套生命周期     Maven拥有三套相互独立的生命周期,它们分别为clean,default和site. 每个生命周期包含一些阶段,这些阶段是有顺序的,并且后面的阶段依赖于前面的阶段,用户和 ...

  10. Excel的文件打开特别慢,xls文件特别大解决一例

    Excel的文件打开特别慢,xls文件特别大解决一例 打开Excel的xls文件打开特别慢,而且操作也非常慢,动辄需要10几20分钟,很不正常.一个简单的Excel的xls文件有10几兆,甚至几百兆的 ...