如果有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. HoloLens开发笔记之Gesture input手势输入

    手势是HoloLens三个首要输入形式之一.一旦你使用凝视定位了一个全息图像,手势允许你与它交互.手势输入允许你使用手或者点击器原生地与全息图像交互. 手势之外,你也可以在应用中使用语音输入来交互. ...

  2. Android开发60条技术经验总结

    Android开发60条技术经验总结,以下是全文: 1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有 ...

  3. eclipse将编辑栏一分为二

    今天无意中发现一个MyEclipse的功能,CTRL SHIF - 三个键一起按下时,同一个编辑窗口会一分为二.这样我们写下面代码需要参考前面代码的时候就很方便了.

  4. powerDesigner 报Unable to connect SQLState=08004 解决方法

    在使用PowerDesigner配置数据库连接(configure connections)的时候,点击Test connection之后弹出Unable to connect SQLState=08 ...

  5. Node以数据块的形式读取文件

    在Node中,http响应头信息中Transfer-Encoding默认是chunked. Transfer-Encoding:chunked Node天生的异步机制,让响应可以逐步产生. 这种发送数 ...

  6. 使用Maven编译项目时提示程序包javax.servlet.http不存在

    将apache-tomcat-8.0.23\lib下的servlet-api.jar拷贝到C:\Program Files\Java\jdk1.8.0_31\jre\lib\ext下即可

  7. 4.Single Number && Single Number （II）

    Single Number: 1. Given an array of integers, every element appears twice except for one. Find that ...

  8. Linux下的shell编程（一）BY 四喜三顺

    Ctrl + Alt + Tvim文本编辑器:i(插入模式),v(可视模式),Esc(普通模式),:w(保存),:r(打开),:q(退出)gvim 文本编辑器vim的升级版gedit 更常用的文本编辑 ...

  9. 十大关系数据库SQL注入工具一览

    摘要:众所周知,SQL注入攻击是最为常见的Web应用程序攻击技术.同时SQL注入攻击所带来的安全破坏也是不可弥补的.以下罗列的10款SQL工具可帮助管理员及时检测存在的漏洞. BSQL Hacker ...

  10. webstrom 2016 破解

    本篇文章经过笔者实验结果,网友均可放心使用 版权声明:本文为博主原创文章,未经博主允许不得转载. 工欲善其事,必先利其器 websrtom作为前端开发神器,现在是越来越多的用户使用.很多小白们下载好了 ...