html - 如何将 div 定位在其父 div 的顶部

Question

在页面的某处，如何使 div-a2 的位置高于 div-a1？当然，我不能在下面的布局中使 div-a2 高于 div-a1。

<div id=a>

<div id=a1> something here
</div>
<div id=a2> show this part first
</div>

</div>

仍在寻找更好的解决方案。谢谢

Answer 1

您可以使用纯 css 实现此目的。像这样写：

#a{
    display:-moz-box;
    display:box;
    display:-webkit-box;
    -moz-box-direction:reverse;
    box-direction: reverse;
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;  
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    box-orient:vertical;     
}

' 检查这个http://jsfiddle.net/ASVtx/1/

Answer 2

您需要为元素提供绝对位置 css，然后根据每个喜欢的内容大小适当地定位它们：

#a1,#a2{position:absolute;}
#a2{  top: 0; }
#a1{  top: 200px;}

或者，在父级内：

#a1,#a2{position:relative;}
#a2{  top: 0; }
#a1{  top: 200px;}

或者，一个可能更好的替代方法是更改​​布局顺序（但我认为由于某种原因这是不可能的，但未说明）。

这是一个例子：http: //jsfiddle.net/MarkSchultheiss/CRCvU/

请参阅这个更新的示例，其中我使用 em 而不是 px 作为位置，给父级一个边框以便您看到它的范围，并在父级周围添加了一些东西。http://jsfiddle.net/MarkSchultheiss/CRCvU/1/

以防万一您想这样做，这里是执行此操作的 jQuery 代码：

var ah1 = $('#a1').height();
var ah2 = $('#a2').height();
var ah = $('#a').height();
var relpos = {float:"left",
    display: "inline-block",
    position: "relative",
    clear: "both"
};
$('#a').css({
    height: ah
});
$('#a1, #a2').css(relpos);
$('#a2').css('top', -ah1);
$('#a1').css('top', ah2);

此处的工作脚本示例：http: //jsfiddle.net/MarkSchultheiss/CRCvU/3/