重叠的CSS元素

Question

我想让蓝色元素位于绿色圆圈的中间位置并在其后面。我怎样才能做到这一点？另外，为什么绿色圆圈和蓝色元素之间存在随机的边际空间？

#profile-circle {
    margin-right: auto; margin-left: auto;
    height: 164px; width: 164px;
    border-radius: 84px 84px 84px 84px;
}

#main-container {
    margin-right: auto; margin-left: auto;
    height: 400px; width: 450px;
}

http://jsfiddle.net/LqJ79/

Answer 1

position: relative会在这里帮到你。它允许您使用z-index将圆圈放在方框上，并且您还可以使用top相对于其当前位置移动框。 position: absolute的问题在于它将元素从流中取出，这不是我想要的。

#profile-circle {
    position: relative;
    z-index: 100;
}

#main-container {
    position: relative;
    z-index: 50;
    top: -100px;
}

See the demo

Answer 2

向上移动蓝色元素的最简单方法是设置负上边距：

margin-top: -82px;

但是，使用当前标记时，蓝色元素将位于顶部。

您可以将绿色元素放在HTML中的蓝色元素下面，然后使用CSS将其向上滑动，或者您可以：

1. 在两个元素上使用position: relative;
2. 在蓝色和绿色元素上设置z-index以确定哪个显示在顶部（为绿色元素提供更高的数字，使其显示在顶部）
3. 在蓝色元素上设置top: -82px;以将其在绿色元素下滑动

它们之间的空间是由于你的边缘：

margin-top: 15px;
margin-bottom: 5px;

Answer 3

使用属性“position：absolute;”在第二个框中，我使用以下内容更新了js fiddle CSS：

#main-container {
    margin-right: auto;
    margin-left: auto;
    height: 400px;
    width: 450px;
    background-color: blue;
    position: absolute;
    top: 80px;
}

Answer 4

你可以position: fixed; top:10px; left: 10px; z-index: 1; 什么不在css中移动它们。像这样：

http://jsfiddle.net/LqJ79/

Answer 5

两者之间的'神奇'空间是由于div user-info中的边距。我将CSS更改为以下内容：

#user-info {
height: auto;
width: 380px;
margin-right: auto;
margin-left: auto;
}

这将删除空间。