Question

我有两个div，我希望彼此叠加。我可以通过在css中设置top来完成此操作。我的问题是，现在div曾经存在很大差距。我想让所有后续内容浮出水面并填补这一空白。

有关如何实现这一目标的任何建议吗？

Answer 1

将您的下边距设置为相同的偏移量：

#Navigation{
   margin-bottom: -249px;
}

Answer 2

应该能够做到这一点：

            #Navigation{
                position:absolute;
                margin-top:-250px; //or whatever px it is
            }

http://jsfiddle.net/MzvC4/1/

Answer 3

您可以在不使用任何负边距的情况下执行此操作 - 如果您只是将position属性更改为absolute，它将从元素流中取出，其他元素将向上移动以适应那。然后，为了适应<body>的10px填充，只需应用top: 10px;将其直接移到<div id="Carousel">之上。 http://jsfiddle.net/MzvC4/4/

#Navigation{
    position:absolute;
    top:10px;    
}

Answer 4

没有必要使用这么多的选择器。请记住，如果选择器使用ONCE，则使用ID，对于重复或常见样式，使用类。这是经过调整的代码：

小提琴：http://jsfiddle.net/MzvC4/

HTML：

<div id="carousel">

</div>
<div id="navigation">

</div>
<div id="tabs">

</div>
<div id="subtabs">
    <div id="lefttab" class="subtabcontent">
        <p>This is left tab content</p>
    </div>
    <div id="righttab" class="subtabcontent lasttab">
        <p>This is right tab content</p>
    </div>
</div>

CSS：

div{
 border:1px red solid;   
}
#carousel{
    margin:0 auto;
    width:985px;
    height:249px;
    background:blue;
    }
#navigation{
    margin:0 auto;
    width:800px;
    height:100px;
    background:green;
    }
#tabs{
    height:113px;
    width:800px;
    height:50px;
    margin-left: auto;    
    margin-right: auto;    
    background:yellow;
    }

#subtabs{
    margin:0 auto;
    width:800px;
    height:133px;
    background:#ccc;
    }

    #lefttab, #righttab {
        float:left;
        margin:0;
        width:370px;
        height:133px;
        background:#fafafa;
        }

    #righttab {
        margin-left:56px; /* instead of #spacer */
        }

    .subtabcontent p {
            /* place tab specific styles here */
            padding:6px;
            font-size:1em;
            }

    .lasttab {
            font-size:2em;
            font-weight:bold;
        }

我如何升级div和跟随它的所有div？

4 个答案: