Question

我有一个包含7个div的页面，如下所示;

<div id="container">
    <div id="head"></div>
    <div id="A">
        <div id="A1">A1</div>
        <div id="A2"></div>
    </div>
    <div id="B"></div>
    <div id="foot"></div>
</div>

样式如下所示;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#A, #B, #foot {
    position: absolute;
}
#head{
    background: #FF9900;
    width: 100%;
    height: 35px;
}
#A {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
}
#A1{
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#B {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #99CC00;
}
#foot{
    background: #0066CC;
    width: 100%;
    height: 35px;
    bottom: 0;
}

但是我的div A1没有显示出来。一个工作小提琴是here。我想在div A1上方显示div B。我该如何解决这个问题？

提前致谢... :)

blasteralfred

Answer 1

导致问题的是#A1 margin-left。

#A的宽度为200px，#A1.margin-left的宽度设置为200px。

Answer 2

您的＃A1 div正在被#B div覆盖。添加z-index：100; （或其他一些z-index编号）到你的#A div CSS。请参阅此处示例http://jsfiddle.net/rGGEK/22/。

Answer 3

首先，你以某种方式忘记了小提琴A1的风格:) 其次，父容器A的宽度为200px，因此A1的右边界开始。

Answer 4

这是因为左边缘。如果你把它减少到10像素就可以看到它。

Answer 5

删除margin-left：200px;从你的A1风格

#A1 {
    height: 35px;
    width: 35px;
    background-color: cyan;
}

在另一个上面显示一个div - css

5 个答案: