html - 当两个 div 使用自动边距居中时，如何将一个 div 放在另一个之上？

Question

我有 2 个 div，一个 square 和一个 bar。两者都使用 auto 边距居中。但我想把酒吧放在广场上。我该怎么做？

html

<div class="square">square</div>
<div class="bar">square</div>

CSS

.square,.bar{
    margin-left:auto;
    margin-right:auto
}
.square{
    background-color:blue;
    width: 100px;
    height: 100px;
}
.bar{
    background-color:green;
    width: 400px;
    height: 40px;
}

Here 是 fiddle 。

Answer 1

http://jsfiddle.net/atomicrevolution/P9yWK/5/

你是这个意思吗？

.square,.bar{
    margin-left:auto;
    margin-right:auto;
}
.square{
    background-color:blue;
    width: 100px;
    height: 100px;
    position: relative;
}
.bar{
    background-color:green;
    width: 400px;
    height: 40px;
    position: relative;
    margin-top: -70px;
}