html - 親divの上部にdivを配置する方法

Question

ページのどこかで、div-a1の上にdiv-a2の位置を設定するにはどうすればよいですか？もちろん、下のレイアウトでdiv-a1の上にdiv-a2を作成することはできません。

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

この更新された例では、位置に px の代わりに em を使用し、親に境界線を付けてスコープを確認し、親の周りに何かを追加しました。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/