親divの一番上のセクションにdivを配置する方法

Question

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

<div id=a> 

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

</div> 

まだ解決策を探しています。おかげ

Answer 1

あなたが要素に絶対位置のCSSを与える必要があり、その後、それぞれ同様の内容の大きさに応じて、それらを適切に配置します：

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

：親の中に、

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

ORまたは、おそらくより良い代替は、レイアウトの順序を変更することです（しかし、私はそれが何らかの理由で述べられていないことはできないと仮定します）。ここで

は例です：http://jsfiddle.net/MarkSchultheiss/CRCvU/

は、私が位置のために代わりにPXのEMを使用し、この更新例を参照してください、あなたはその範囲を参照してくださいので、親に国境を与え、そして親の周りのものを追加しました。

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); 

ここにスクリプト例の作業：あなたは純粋なCSSでこれを達成することができますhttp://jsfiddle.net/MarkSchultheiss/CRCvU/3/

Answer 2

をhttp://jsfiddle.net/MarkSchultheiss/CRCvU/1/

は、あなたがそのように行きたいだけの場合には、ここにこれを行うにはjQueryのコードです。このように書く：

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