Question

我正在尝试相对于先前元素定位一些文本。所以我有4个盒子和1个容器，第一个和第二个元素可以工作，但问题就开始了。它应该是2行，每行有2个盒子。

Box1 | BOX2 Box3 | Box4

但是Box3没有按照预期显示。

http://homeweb.mah.se/~M09K0291/test.htm

在Chrome中，我从实际框下方的第3框中获取文本，在IE中，第三个框在后面第四个方框。

有什么想法吗？

Answer 1

div.c {
clear:left;
position:relative;
top:-100px;
}

div.d { top:-200px; }

Answer 2

由于您无论如何都要为框定义明确的高度和宽度，因此只需在position: relative上设置.page1时使用绝对定位就可以更清晰，更健壮。

例如：

 .page1 { position: relative; }
 .a, .b, .c, .d { position: absolute; }
 .a { top: 0; left: 0; }
 .b { top: 0; left: 100px; }
 .c { top: 100px; left: 0; }
 .d { top: 100px; left: 100px;}

请参阅：http://jquery.nodnod.net/cases/597

编辑：

如果您不想使用绝对定位，或者想要避免使用top和left，您还可以使用浮动和清除：

.a, .b, .c, .d { float: left; }
.a, .c { clear: left; }

您还需要通过类似clearfix的内容申请.page1的浮动广告。

请参阅：http://jquery.nodnod.net/cases/598

Answer 3

将元素相对于通常位置的位置相对定位。元素不会从文档流中取出，因此如果移动元素，它将影响元素之后的元素定位。

位置绝对位置元素相对于包含块。元素从文档流中取出，因此移动元素不会影响页面上的任何其他内容。

使用相对定位的示例

如果您使用位置相对，则元素将向上和向左移动。

div.fyrkant
{
    height: 100px;
    width: 100px;
    position:relative;
}
div.a
{
    background-color: #b5e274;
}
div.b
{
    background-color: #e2d974;
    left: 100px;
    top:-100px;
}
div.c
{
    background-color: #e2b074;
    top: -100px;
}
div.d
{
    background-color: #e27e74;
    top: -200px;
    left: 100px;
}

如果您不想使用top和left，则应调查使用浮动并清除此问题。

使用花车的示例

最佳的跨浏览器解决方案将涉及向您的HTML添加标记。因为你想要的是两排块，用div包围每一行。

<div class="page1">
    <div class="row">
        <div class="a fyrkant">test a
        </div>
        <div class="b fyrkant">test b
        </div>
    </div>
    <div class="row">
        <div class="c fyrkant">test c
        </div>
        <div class="d fyrkant">test d
        </div>
    </div>
</div>

然后添加到您的CSS

div.fyrkant
{
    height: 100px;
    width: 100px;
}
.row {overflow:hidden;zoom:1;}
.a, .b, .c, .d { float: left; }

溢出：隐藏清除浮动因此.row包含块。如果你没有那些行没有高度，行将在同一行。溢出：隐藏在ie6中不起作用但缩放：1将（调用haslayout）

CSS位置相对

3 个答案: