新手求教：关于定位和z-index不起作用的问题，请各位大神帮忙，在线等

屋昂仼 2015-08-04 09:46:14

代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>下拉菜单</title>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slide").toggle(function(){
$("#down_box").show();
},function(){
$("#down_box").hide();
})
})

</script>
<style>
p{margin:0;padding:0;}
.admin_bar{width:200px;height:40px;margin-top:10px;background-color:#099dfa;line-height:40px;position:absolute;}
.down_box{width:213px;height:122px;background-color:white;border:1px solid #bfc0c1;position:relative;top:0px;left:50px;z-index:1000;}
.admin_bar span p,img{float:left;}
.admin_bar span img{margin:4px 10px 0 15px;}
.admin_bar a{float:right;width:22px;height:11px;margin:12px 10px 0 0;}
.down_box span{display:block;width:100%;height:40px;line-height:40px;}
.down_box img{margin:4px 10px 0 15px;}
</style>
</head>
<body>
<div class="admin_bar">
<span><img src="images/ico_admin01.png"><p>你好，管理员</p></span>
<a id="slide" href=""><img src="images/ico_down.png"></a>
</div>
<div id="down_box" class="down_box" style="display:none;">
<span><img src="images/ico_admin01.png"><a href="">个人信息</a></span>
<span style="border-top:1px solid #bfc0c1;border-bottom:1px solid #bfc0c1;"><img src="images/ico_set01.png"><a href="">账号管理</a></span>
<span><img src="images/ico_exit01.png"><a href="">退出系统</a></span>
</div>
<div style="width:100px;height:100px;background-color:red;position:absolute;"></div>
<div style="width:100px;height:100px;background-color:blue;position:relative;top:0px;left:50px;"></div>
</body>
</html>
我想知道比如为什么后一个div不是应该相对于前一个div进行定位的吗，但是现在后一个div却相对于body进行定位，而且z-index也不管用，这是什么问题？

...全文

260 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

Kim_Du 2015-08-05

打赏
举报

引用

<div style="width:100px;height:100px;background-color:red;position:absolute;"></div> <div style="width:100px;height:100px;background-color:blue;position:relative;top:0px;left:50px;"></div>

absolute(绝对定位)和relative(相对定位)，通俗来讲前者定位的参照物为父级元素，后者的参照为本身在文档流中的位置至于z-index的问题，你在网上找找z-index使用时的注意点，再结合你的代码，你就知道了

usecf 2015-08-05

打赏
举报

后一个div你用的是position:relative，这种方式没有破坏文档流。而它之前的div，用的是position:absolute，这种方式破坏了文档流，它们两个div不在一个层面上的。

可能黑客 2015-08-05

打赏
举报

<div id="parentdiv" style="position:absolute;z-index:1"> <div id="childdiv" style="position:relative;z-index:2"> </div> </div> 随手写的，参考下吧，z-index在这种情况下才会起作用

根子的数据库 2015-08-04

打赏
举报

你可以仔细去看看相对定位和绝对定位的知识

根子的数据库 2015-08-04

打赏
举报

定位是跟父集相对的你现在下面的那个div在外面并不在上一个div里面 so 就会出现这种情况咯你这样写 <div style="width:100px;height:100px;background-color:red;position:absolute;"> <div style="width:100px;height:100px;background-color:blue;position:relative;top:0px;left:50px;"></div> </div>