1

想象一下下面的 HTML 代码：

   <html>
    ...
    <div id="stuff1">
        barbaz
    </div>

    <div id="stuff2">
        foobar
    </div>
    ...
   </html>

现在，假设我想使用 CSS 以便 stuff2出现在上面stuff1。有没有办法在不使用position: absolute且不更改 HTML 代码的情况下做到这一点？

我试过float这样使用：

#stuff2 { float: left; }
#stuff1 { clear: left; }

但它没有成功。它与不使用 float.

4

2 回答 2

1

我成功地首先获得了第二个元素，但没有像您期望的那样在下一行中。

#stuff1{display:inline-block;/* or display: inline; */}
#stuff2{float:left;}

Working Fiddle

要不然

您还可以使用transformCSS3 属性

#stuff1{
    background-color:red;
    transform: translate(0px, 100px);
    -webkit-transform: translate(0px, 100px);
    -moz-transform: translate(0px, 100px);
    -o-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
}
#stuff2{
    background-color:green;
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
}

Working Fiddle

还可以查看 paul Irish 网站，了解翻译和定位之间的性能图表。

如果您不知道高度，请使用javascript 或 jQuery计算高度。

于 2013-03-25T15:54:38.340 回答
1

试试下面的css，也许这对我们有帮助

#stuff2 { float: left;  margin-top: -40px; }   
#stuff1 { clear: left; margin-top: 30px; }
于 2013-03-26T11:39:17.707 回答