如果有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. IOS中图片拉伸技巧与方法总结(转载)

    以下内容转载自:http://my.oschina.net/u/2340880/blog/403996 IOS中图片拉伸技巧与方法总结 一.了解几个图像拉伸的函数和方法 1.直接拉伸法 简单暴力,却是 ...

  2. 安全沙箱冲突:Loader.content:XX 不能访问 XX 可以通过调用 Security.allowDomain 来避免此冲突。

    参考资料:http://tieba.baidu.com/p/882855105 感谢:Z0287yyy 感谢分享精神. 具体解决方案:在loader去load的时候,带上这个参数 var contex ...

  3. java内存溢出分析(一)

    在项目中发现内存占用过高,且一直不会释放,top命令如下图显示 可以看到pid为17453的java进程占用27.1%内存,且长时间没有释放. 1.使用命令生成heap日志以供分析 sudo jmap ...

  4. Codeforces724D [字符串][乱搞][贪心]

    /* 不要低头,不要放弃,不要气馁,不要慌张 题意:给你一个区间长度n和一个字符串,要求在字符串中选择一些symbol使得字符串的任意长度为n的子区间都存在至少一个symbol. 任意选取symbol ...

  5. UNIX网络编程-基本API介绍(一)

    1.基本结构 大多数套接口函数都需要一个指向套接口地址结构的指针作为参数.每个协议族都定义它自己的套接口地址结构.这些结构的名字均以“sockaddr_”开头,并以对应每个协议族的唯一后缀结束. 1. ...

  6. java 中小数点的处理

    第一种 BigDecimal bg = new BigDecimal(f); double f1 = bg.setScale(2, BigDecimal.ROUND_HALF_UP).doubleVa ...

  7. 往sql数据库表中添加字段

    通用式: alter table [表名] add [字段名] 字段属性 default 缺省值 default 是可选参数增加字段: alter table [表名] add 字段名 smallin ...

  8. notepad++ 右键

    在网上搜索建立reg 后运行, 虽然右键菜单出现了建立的右键项目名,但与软件不关联 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\ ...

  9. Linux启动/停止/重启Mysql数据库的方法——转载

    Mysql启动.停止.重启常用命令 a.启动方式1.使用 service 启动:[root@localhost /]# service mysqld start (5.0版本是mysqld)[root ...

  10. CSS声明顺序

    CSS对元素样式进行声明,虽然一条规则中的声明可以按照任何顺序写出来,但是还是应该有个优先级的顺序. 如下的声明顺序摘抄自<CSS设计指南>,优先级顺序如下: display及相关声明 p ...