0

我想让蓝色元素坐在绿色圆圈的中间和后面。我怎样才能做到这一点？另外，为什么绿色圆圈和蓝色元素之间有一个随机的边缘空间？

在此处输入图像描述

#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/

4

5 回答 5

3

position: relative 会在这里帮助你。它允许您使用z-index将圆圈放在盒子上，也可以使用top它将相对于其当前位置移动盒子。问题position: absolute在于它将元素从流程中取出，我认为这不是你需要的。

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

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

查看演示

于 2012-07-05T18:37:28.520 回答
0

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

http://jsfiddle.net/LqJ79/

于 2012-07-05T18:41:40.043 回答
0

两者之间的“神奇”空间是由于 div 用户信息中的边距。我将 CSS 更改为以下内容：

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

这将删除空间。

于 2012-07-05T18:46:54.613 回答
0

使用属性“位置：绝对；” 在第二个框中，我使用以下内容更新了 js fiddle CSS：

#main-container {
    margin-right: auto;
    margin-left: auto;
    height: 400px;
    width: 450px;
    background-color: blue;
    position: absolute;
    top: 80px;
}
于 2012-07-05T18:37:19.910 回答
0

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

margin-top: -82px;

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

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

  1. position: relative;在两个元素上使用
  2. 在蓝色和绿色元素上设置 az-index以确定哪个出现在顶部（给绿色元素一个更大的数字，使其出现在顶部）
  3. 设置top: -82px;在蓝色元素上以将其向上滑动到绿色元素下方

它们之间的空间是由于您的利润：

margin-top: 15px;
margin-bottom: 5px;
于 2012-07-05T18:38:46.287 回答