解决IE6 IE7绝对定位弹层被后面的元素遮住
解决IE6 IE7绝对定位弹层被后面的元素遮住?
弹层边框一直被后面的元素边框遮住,试了n种方法,只有这个比较好用。
<div class="tuijian-table">
<ul>
<li class="first">
<span class="thead">4月(将雨最少)</span>
<p class="tbody">
<span class="mon-wendu"><em class="begin-wd">9</em>~<em class="end-wd">15</em></span>
<span class="mon-jiangyu">5天降雨</span>
</p>
<a class="layer" href=""><b class="now-detail">查看1月历史天气详情</b></a>
</li>
<li>
<span class="thead">5月</span>
<p class="tbody">
<span class="mon-wendu"><em class="begin-wd">9</em>~<em class="end-wd">15</em></span>
<span class="mon-jiangyu">7天降雨</span>
</p>
<a class="layer" href=""><b class="now-detail">查看1月历史天气详情</b></a>
</li>
<li class="lasted">
<span class="thead">6月(空气最优)</span>
<p class="tbody">
<span class="mon-wendu"><em class="begin-wd">9</em>~<em class="end-wd">15</em></span>
<span class="mon-jiangyu">9天降雨</span>
</p>
<a class="layer" href=""><b class="now-detail">查看1月历史天气详情</b></a>
</li>
</ul>
</div>
style样式:
li{
float:left;
width:248px;
height:105px;
text-align:center;
font-size:12px;
cursor:pointer;
position:relative;
z-index:9;
zoom: 1;
*zoom:1;
}
li.first{
border-left:1px solid #dcecf9;
position:relative;
z-index:99;
}
li.lasted{
z-index:1;
}
.layer{
display:none;
position:absolute;
left:0;
top:0;
z-index:9;
zoom: 1;
border: 2px solid #268dea;
text-decoration: none;
width:246px;
height:101px;
}
.layer b{
background:#268dea;
line-height:27px;
display:block;
width:100%;
color:#fff;
margin-top:75px;
text-align:center;
font-size:12px;
}
li:hover{
.layer{
display:block;
}
}
看出来没有,弹层的定位层级不是最重要的,最重要的是三个相对定位的li元素,一个比一个层级高了,所以要设置成第一个的层级比下一个高才可以。
ps补充:li标签hover前后border宽度不一样怎么防止抖动?
把hover之后的border不要加载li上,加在一个单独的隐藏标签上,当hover上li标签时,这个标签显示。
解决IE6 IE7绝对定位弹层被后面的元素遮住的更多相关文章
- ie6 ie7 绝对定位 相对定位 层被遮住
relative 上加上z-index有多个,则z-index递减, absolute层显示则不会被其它标签挡住.
- 解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
- 解决IE6,IE7不能隐藏绝对定位溢出的内容
令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效. 情况一:(在parent上增加position:relative) <s ...
- 解决IE6 IE7 JSON.stringify JSON 未定义问题
在项目中引入json2.js 官方http://www.json.org/ 源码地址:https://github.com/douglascrockford/JSON-js $.ajax({ url: ...
- clearfix 兼容IE6/IE7,解决ie6/ie7下多出一行的问题,bootstrap的clearfix的bug
.clearfix:before, .clearfix:after { content: "."; display: block; height: ; overflow: hidd ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
A floated box is shifted to the left or right until its outer edge touches the containing block edge ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...
随机推荐
- Linux下查找进程,kill进程
1. ps命令用来查找linux运行的进程,常用命令: ps aux | grep 进程名: eg:ps aux | grep admin 查找admin的进程 或者 ps -ef | grep j ...
- rust borrow and move
extern crate core; #[deriving(Show)] struct Foo { f : Box<int> } fn main(){ let mut a = Foo {f ...
- linux命令学习笔记(52):ifconfig命令
许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有 一个类似的工具,也就是ifconfig (interfaces config).通 ...
- dd备份文件系统
1.实现dd的备份: 使用gzip压缩: dd if=/dev/hdb | gzip > /local/path/image.gz 说明:/dev/hdb 是硬盘整盘.对不同的硬盘,可能是 /d ...
- 洛谷P3252 [JLOI2012]树
题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度是0,它的儿子节点的深度为1.路径不 ...
- 一般项目转为Maven项目所遇到的问题
最近搞CI,准备使用Maven,但以前的项目不是Maven项目,需要把项目转换为Maven项目.这遇到几个小问题,一是jar包的依赖,二是从本地仓库取出依赖jar包. 由于没有本地仓库,要手动添加ja ...
- 百度地图API的第一次接触——自定义控件
1.定义一个控件类,即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEF ...
- Scala学习——集合的使用和“_”的一些使用(中)
1.空格加_可以表示函数的原型 命令行代码: scala> def fun1(name:String){println(name)} fun1: (name: String)Unit scala ...
- 面向对象(static关键字)
static关键字:用于修饰成员(成员变量和成员函数) 被修饰后的成员具备以下特点: 随着类的加载而加载 优先于对象存在 被所有的对象共享 可以直接被类名调用 使用注意: 静态方法只能访问静态成员 静 ...
- mysql create table