css中div的嵌套问题？基本情况是 div1中嵌套了div2和div3 代码如下
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{margin:0
auto;
hight:900px;}
.div1{
width:100%;
height:600px;
border-style:none;
margin:0 auto;
}
.div3 {margin:0 auto;
width:30px;
height:540px;
background:#ffff77;
border-style:solid;
border-width:3px 1px 2px 1px;
border-color:#444444;
position:relative;
top:-524px;
z-index:1;
}
.div2 {
margin:0 auto;
width:920px;
height:536px;
background:#ffff77;
border-style:solid;
border-width:3px 5px 2px 8px;
border-color:#444444;
position:relative;
top:20px;
}
</style >
</head>
<body>
<div id="yincang" class="div1">
<div id="shupi" class="div2">
</div>
<div class="div3">
</div>
</body>
</html>
代码本来想达到的效果是div2置于div3之上，并且两者上下基本保持对齐。
而实际这段代码运行后发现 div3在div2下方拉出好长的距离。。。。。
求高手给看一下，该怎样解决这个问题 展开
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{margin:0
auto;
hight:900px;}
.div1{
width:100%;
height:600px;
border-style:none;
margin:0 auto;
}
.div3 {margin:0 auto;
width:30px;
height:540px;
background:#ffff77;
border-style:solid;
border-width:3px 1px 2px 1px;
border-color:#444444;
position:relative;
top:-524px;
z-index:1;
}
.div2 {
margin:0 auto;
width:920px;
height:536px;
background:#ffff77;
border-style:solid;
border-width:3px 5px 2px 8px;
border-color:#444444;
position:relative;
top:20px;
}
</style >
</head>
<body>
<div id="yincang" class="div1">
<div id="shupi" class="div2">
</div>
<div class="div3">
</div>
</body>
</html>
代码本来想达到的效果是div2置于div3之上，并且两者上下基本保持对齐。
而实际这段代码运行后发现 div3在div2下方拉出好长的距离。。。。。
求高手给看一下，该怎样解决这个问题 展开
4个回答
展开全部
z-index
这个不需要写DIV的层级关系，也能做到。
如果你用定位，那就把DIV3的TOP减小一点就回来了。
我 用的方法是，你可以为DIV1设定一个填充，那么DIV2就定位了，然后再写DIV3的上边距，这样你想要多远就有多远了。
不要写DIV2的下边距，因为上面的下边距和下面的上边距会合并，而不是相加。
这个不需要写DIV的层级关系，也能做到。
如果你用定位，那就把DIV3的TOP减小一点就回来了。
我 用的方法是，你可以为DIV1设定一个填充，那么DIV2就定位了，然后再写DIV3的上边距，这样你想要多远就有多远了。
不要写DIV2的下边距，因为上面的下边距和下面的上边距会合并，而不是相加。
追问
怎样用填充效果？请教下 谢谢！
追答
看来你的问题还是要用到边距，填充是padding=20px,把它放在DIV1里，Div2就会拉开距离了。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为你的z-index设置不对。
div2要在div3之上，那么div2的z-index应该大于div3.
现在div3的z-index值为1，而div2的值为0.
div2要在div3之上，那么div2的z-index应该大于div3.
现在div3的z-index值为1，而div2的值为0.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div2和div3的距离在这里只与position属性 有关，与z-index无关。 你只需要将div3中的top属性的值改为20px，就可以恢复与原来的位置相近。
追问
哥哥 div2和div3是同级的 同级元素是垂直排列的 div2 高度500+，top：20 明显实现不了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
LZ用的IE6么？话说我用的IE9完全木有问题阿，LZ是想实现一个像书本一样的效果么？
追问
O(∩_∩)O~被你猜到了，学习阶段，我用的的确是IE6，难道不支持吗？求解释，谢谢！
追答
有可能，现在IE6已经很少用了，因为在CSS的兼容上会出现很多问题，IE现在已经出到IE9了，对CSS的支持也还不错，所以劝LZ赶快升级下自己的浏览器哦~不然下个chrome浏览器也OK的~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
