如果有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> first</div>
<div id="second" class="second">second </div>
</body>
</html>
解决方案：
1.需要将first的position设置为relative
2.将.first{}里面的z-index:2的注释取消
结果：
发现first div浮在second的上面了。
解释：
默认z-index是0，如果设置了z-index的值高于其他，就可以优先显示。
DIV重叠 如何优先显示（div浮在重叠的div上面）的更多相关文章
-
Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...
-
点击按钮对两个div的隐藏与显示进行切换
HTML: <button type="button" id="showHidden">点击切换div的隐藏与显示</button> ...
-
多个div独立控制其显示/隐藏
今天要说一个神奇的html标签op,静态页下可以配合jquery分别控制每个层的显示/隐藏切换. 如果用动态中使用,用文章id做区分就可以了. <html> <head> &l ...
-
CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
-
Jquery一个slideToggle搞定div的隐藏与显示
Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...
-
承载地图的div如果隐藏再显示，则定位时会定位到页面左上角
承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.
-
css：多个div在同一行显示
使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...
-
CSS：使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
-
当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- bookstrap必备的基础知识
-
(easy)LeetCode 223.Rectangle Area
Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...
-
How to using T-SQL statement copy table[SQL]
SQL复制表的几种方法: 仅复制表结构:select * into newTableName from OldTableName where 1 = 2 SQL复制整张表 select * into ...
-
MAC安装JDK及环境变量配置
1.访问Oracle官网 http://www.oracle.com,浏览到首页的底部菜单 ,然后按下图提示操作: 2.点击“JDK DOWNLOAD”按钮: 3.选择“Accept Lisence ...
-
（三）Rest风格的资源URL
第一节:Restful风格的资源URL简介 第二节:SpringMVC对Rest风格的支持 第三节:@PathVariable获取Url变量 第四节:SpringMVC对静态资源的处理 http:// ...
-
log4net始终占用日志文件的问题
在appender 下面加 <lockingModel type="log4net.Appender.FileAppender+MinimalLock" />
-
linux ——使用find如何快速替换所有相同参数
在生成环境上有时候需要大规模修改某一配置里的参数,但是该参数存在多个地方,比如IP地址 端口 项目名等,特别是项目名称混乱想统一 find /项目地址 -type f |xargs grep &qu ...
-
ImportError: No module named mysql 报错python引用mysql报错
需要安装 pip2.7 install MySQL-python pip2.7 install mysql-connector
-
tapable事件流插件
tapable Webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundl ...
-
win10 VS code 编译运行 C/C++的方法
具体配置过程如下链接: https://zhuanlan.zhihu.com/p/35178331 但中间出了点问题:CTRL+ALT+n 运行后: PS D:\C++> cd "d: ...