ie 6/7 下相对定位层(relative)挡在绝对定位层(absolute)上面的解决方法

最新推荐文章于 2023-09-09 18:15:42 发布
最新推荐文章于 2023-09-09 18:15:42 发布
阅读量2.4k 收藏
点赞数
分类专栏： JavaScript CSS 文章标签： ie class border function xhtml system

感谢原创 http://hi.baidu.com/shiryu963/home ^_^

 

在用js做下拉菜单的时候，如果下面的div用的相对定位(relative)它就会挡住下拉菜单，示例代码：


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AspectGaming lottery system_home_terms</title>

<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
ul li{ list-style:none;}
#nav{width:600px; height:40px; border:1px red solid; }
#nav li{ float:left; width:150px; position:relative;}

ul#nav li a {display:block;height:34px;  border:1px #ccc solid;}

ul#memus { width:150px;height:0;overflow:hidden; position: absolute; z-index:1000; border:1px #09C solid;}
.temp{ width:600px; height:60px;background-color:#F93; position:relative;}
.temp p{ position:absolute; background-color: #69C;}
.bo{width:600px; height:60px;background-color:#969;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".sys-link").click(function(){                  
if($("#memus").height()==0){  
$("#memus").animate({height: '208px'}, 500);
}else{
$("#memus").animate({height: '0px'}, 500);
}                                             
});
});
</script>
</head>

<body>
<div id="container" class="container">
<ul id="nav">
<li><a href="#" class="home-link">Home</a></li>
<li class="sys">
<a href="#" class="sys-link">System Management</a>

<ul id="memus" class="">
<li class="select"><a href="#">Chains</a></li>
<li class="select"><a href="#">Retailers</a></li>
<li class="select"><a href="#">Games</a></li>
<li class="select"><a href="#">Machines</a></li>
<li class="select"><a href="#">Drawings</a></li>
<li class="select"><a href="#">Tickets</a></li>
<li class="select"><a href="#">User Access</a></li>
<li class="select"><a href="#">Reports</a></li>
</ul>

</li> 
</ul> 
<div class="temp">
<p>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss </p>
</div>
<div class="bo"></div>
</div>
</body>
</html>

解决方法：
在下拉菜单的ul外加一层div，ul进行相对定位，div进行绝对定位和z-index，在最外层的li上加上z-index
<li>
<div><ul>...</ul></div>
</li>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AspectGaming lottery system_home_terms</title>

<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
ul li{ list-style:none;}
#nav{width:600px; height:40px; border:1px red solid; }
#nav li{ float:left; width:150px; position:relative;}
.sys{ z-index:8;}
ul#nav li a {display:block;height:34px;  border:1px #ccc solid;}
#memuswrap{position:absolute;top:34px;left:0;z-index:20000!important; }
ul#memus { width:150px;height:0;overflow:hidden; position:relative; border:1px #09C solid;}
.temp{ width:600px; height:60px;background-color:#F93; position:relative;}
.temp p{ position:absolute; background-color: #69C;}
.bo{width:600px; height:60px;background-color:#969;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".sys-link").click(function(){                  
if($("#memus").height()==0){  
$("#memus").animate({height: '208px'}, 500);
}else{
$("#memus").animate({height: '0px'}, 500);
}                                             
});
});
</script>
</head>

<body>
<div id="container" class="container">
<ul id="nav">
<li><a href="#" class="home-link">Home</a></li>
<li class="sys">
<a href="#" class="sys-link">System Management</a>
          <div id="memuswrap">
<ul id="memus" class="">
<li class="select"><a href="#">Chains</a></li>
<li class="select"><a href="#">Retailers</a></li>
<li class="select"><a href="#">Games</a></li>
<li class="select"><a href="#">Machines</a></li>
<li class="select"><a href="#">Drawings</a></li>
<li class="select"><a href="#">Tickets</a></li>
<li class="select"><a href="#">User Access</a></li>
<li class="select"><a href="#">Reports</a></li>
</ul>
        </div>
</li> 
</ul> 
<div class="temp">
<p>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss </p>
</div>
<div class="bo"></div>
</div>
</body>
</html>

elim051
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1.width是核心内部元素，margin,padding,border值不属于width 2.absolute 两个绝对定位的元素如果是同一父元素会发生重叠，而不是与float一样会正常排布
qq_29469941的博客
09-22 1945
1  一个元素的width值，不包括 padding，border，margin值。只是最核心的内容的宽度。 内部再有元素，内部元素的 margin border padding都算在外部元素的 width值里。属于外部元素的核心内容宽高。 2 使用 absolute 定位，是根据 所有父元素中 第一个 非默认position属性 的那个元素 来相对定位。 就是相对于那个元素定位
position:relative 与position:absolute
sunny327的专栏
03-24 1033
父级元素为position:relative    子元素为position:absolute 如果想让父级元素在子元素之上，即z-index：100;       子元素为z-index:90，这样是不行的，因为子元素始终都是在父级元素之内，且会一直在父元素之上，而不管它的z-index是不是比父级元素的小。 但是我又想让父元素在子元素之上又该 怎么办呢？
解读absolute与relative
米灰色的天空～～
11-12 1419
 很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。Absolute，CSS中的写法是：position:absolute;
Z-Index在IE中的迷惑
weixin_34261415的博客
05-27 121
z-index属性简介 引用: z-index : auto | number auto：默认值。number：无单位的整数值，可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。 注意：这个属性不会作用于窗口控件，如selct 对象。在IE 5...
position定位问题relative，absolute
熊气的博客
06-24 116
position定位是一个经常使用的css属性，简单的来说就是position: relative;在父级上，position: absolute;在子级上，子级在通过top，right，left，bottom来控制距离。 直接上代码： <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>定位问题</title> <sty..
css的定位(position)
drawlessonsfrom的博客
02-28 222
CSS使用position选项来定义元素的定位属性，该选项有5个可选值：static、relative、absolute、fixed、inherit，默认值为static。inherit属性表示继承父元素的定位属性。 1、相对定位 相对定位就是指相对于文档流中的其他已定义的元素位置进行定义。 注：对于脱离文档流的元素，比如设置了浮动或者绝对定位的元素不会对相对定位产生影响。 （1）static（默认值） 如果使用默认值，在CSS中为元素定义top、left、right、bottom、z-index都不会生效
IE7中绝对定位元素之间的遮盖问题示例探讨
09-25
在本文中，我们将深入探讨IE7浏览器中关于绝对定位元素之间遮盖问题的解决方案。在网页设计中，绝对定位常用于创建复杂的布局效果，但在不同的浏览器中，特别是较老的版本如IE7，可能会遇到一些兼容性问题。本文通过...
IE绝对定位元素神秘消失或被遮挡的解决方法
09-25
"IE绝对定位元素神秘消失或被遮挡的解决方法"这一问题主要涉及到CSS中的相对定位、绝对定位以及浮动元素的相互影响。 首先，我们需要理解相对定位和绝对定位的概念。相对定位是相对于元素本身的位置进行偏移，而...
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
09-05
这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...
css关于position属性的用法详解(绝对定位和相对定位的混淆)
12-13
挺久没用，有点忘了关于position这个属性的用法，导致在练手的时候又犯了跟最开始新手才会犯的错误，那就是absolute和relative的用法。 在此首先看一下官方对这两个属性值的解释： position 属性值的含义： static ...
position（relative）和div的重叠或者遮挡问题
Mm_Dxx的博客
01-03 4628
今天遇到一件怪事情，那就是position的属性和div的遮挡关系，密切联系。 首先说明问题出现的地方： nav是fixed，但是box还是把nav给遮住了，这是为什么呢？ 首先来看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DE...
absolute和relative元素层级问题
最新发布
分享前端知识，记录前端进阶
09-09 362
是否脱离文档流和层级无绝对关系relative元素也有z-index，和absolute的层级要看谁z-index大。
Float浮动
qq_30906791的博客
11-25 142
为什么使用Float？ 最初，float属性是用于在文本块内浮动图像，它是在网页上创建多列布局的最常用工具之一。 随着flexbox和grid的出现，它现在又恢复了其原始用途。 浮动的背景知识 引入float属性是为了让web开发人员实现简单的布局，其中涉及到图像在文本列中浮动，文本环绕在文本列的左侧或右侧。你可能在报纸版面上看到的那种东西。 浮动通常用于创建具有浮动的多个信息列的整个网站布局，这样它们就可以并排排列（默认行为是，这些列的排列顺序与在源代码中出现的顺序相同——位于另一列的下方）。随着有更好的
HTML标签子元素绝对定位被父元素遮挡问题
qq_34248133的博客
07-19 1万+
请看如下示例代码： <li class="box"> <img src="...." class="hot" /> <a href="..."></a> </li> <style> .box { position:relative; } .hot { position:absolu...
html绝对定位重叠,绝对定位元素被遮挡的解决方法技术分享
weixin_35980011的博客
05-30 1万+
css如何避免绝对定位覆盖其他元素？css 固定定位造成两个DIV重叠，如何清理？绝对定位的元素盖住下方的元素时，为什么把下方的p因为relative不脱离文档流，在原有位置大小还在那，你再定位，他还是有个位置在原来的地方，所以不会被覆盖，而position是脱离文档流的，它直接飘在文档流外，在文档流内没有大小，你放在文档流之外的肯定会覆盖文档流，建议定位少用。绝对定位一个元素，不要遮挡到同级的元...
html中控制相对位置,html/css中相对定位relative和绝对定位absolute的用法
weixin_42493720的博客
06-08 5932
一、相对定位(position：relative)1、相对定位：将盒子的position属性设置为relative；可通过left、top、right、bottom设置偏移量。相对定位基础用法示例：我们先在页面设置两个div盒子(第一个红色；第二个蓝色)最初的位置我们将第一个盒子进行相对定位；离左边200px；离顶部50px；得到的效果是；得出结论：1、红色盒子是相对于盒子最初的位置向左偏移200...
position:absolute引起的遮挡其他元素的问题
热门推荐
weixin_42137023的博客
10-22 1万+
  bug 是这样的，发现子集的元素定位来个负数 bottom:-10px; 然后再父级的上面加overflow:hidden;发现还是不管用 解决方案在相对定位（position:relative）容器 上来个overflow：hidden；问题就解决了，不要加错 最终问题解决 ...
绝对定位能配合那些定位使用
07-25
\[1\]此外，绝对定位与浮动定位(float)不能同时使用，因为在某些情况下，IE6浏览器可能无法正确显示同时使用绝对定位和浮动定位的元素。\[2\]绝对定位(position:absolute)还可以用于在布局中对盒子对象进行定位，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值