DIV重叠 如何优先显示(div浮在重叠的div上面)
如果有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 ...
随机推荐
- IOS中图片拉伸技巧与方法总结(转载)
以下内容转载自:http://my.oschina.net/u/2340880/blog/403996 IOS中图片拉伸技巧与方法总结 一.了解几个图像拉伸的函数和方法 1.直接拉伸法 简单暴力,却是 ...
- 安全沙箱冲突:Loader.content:XX 不能访问 XX 可以通过调用 Security.allowDomain 来避免此冲突。
参考资料:http://tieba.baidu.com/p/882855105 感谢:Z0287yyy 感谢分享精神. 具体解决方案:在loader去load的时候,带上这个参数 var contex ...
- java内存溢出分析(一)
在项目中发现内存占用过高,且一直不会释放,top命令如下图显示 可以看到pid为17453的java进程占用27.1%内存,且长时间没有释放. 1.使用命令生成heap日志以供分析 sudo jmap ...
- Codeforces724D [字符串][乱搞][贪心]
/* 不要低头,不要放弃,不要气馁,不要慌张 题意:给你一个区间长度n和一个字符串,要求在字符串中选择一些symbol使得字符串的任意长度为n的子区间都存在至少一个symbol. 任意选取symbol ...
- UNIX网络编程-基本API介绍(一)
1.基本结构 大多数套接口函数都需要一个指向套接口地址结构的指针作为参数.每个协议族都定义它自己的套接口地址结构.这些结构的名字均以“sockaddr_”开头,并以对应每个协议族的唯一后缀结束. 1. ...
- java 中小数点的处理
第一种 BigDecimal bg = new BigDecimal(f); double f1 = bg.setScale(2, BigDecimal.ROUND_HALF_UP).doubleVa ...
- 往sql数据库表中添加字段
通用式: alter table [表名] add [字段名] 字段属性 default 缺省值 default 是可选参数增加字段: alter table [表名] add 字段名 smallin ...
- notepad++ 右键
在网上搜索建立reg 后运行, 虽然右键菜单出现了建立的右键项目名,但与软件不关联 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\ ...
- Linux启动/停止/重启Mysql数据库的方法——转载
Mysql启动.停止.重启常用命令 a.启动方式1.使用 service 启动:[root@localhost /]# service mysqld start (5.0版本是mysqld)[root ...
- CSS声明顺序
CSS对元素样式进行声明,虽然一条规则中的声明可以按照任何顺序写出来,但是还是应该有个优先级的顺序. 如下的声明顺序摘抄自<CSS设计指南>,优先级顺序如下: display及相关声明 p ...