how to position a div on top section of its parent div - html

Question

Somewhere in a page, how to make div-a2 position above div-a1? Of course, I cannot make div-a2 above div-a1 in the layout below.
<div id=a>
<div id=a1> something here
</div>
<div id=a2> show this part first
</div>
</div>
still looking for better solution. thanks

Answer 1

You can achieve this with pure css. Write like this:
#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;
}
'
Check this http://jsfiddle.net/ASVtx/1/

Answer 2

You will need to give the elements absolute position css, and then position them appropriately depending on the content size of each like:
#a1,#a2{position:absolute;}
#a2{ top: 0; }
#a1{ top: 200px;}
OR, within the parent:
#a1,#a2{position:relative;}
#a2{ top: 0; }
#a1{ top: 200px;}
Or, a perhaps better alternate is to change the layout order (but I assume that is not possible for some reason not stated).
Here is an example: http://jsfiddle.net/MarkSchultheiss/CRCvU/
See this updated example where I used em instead of px for the position, gave the parent a border so you see its scope, and added stuff around the parent. http://jsfiddle.net/MarkSchultheiss/CRCvU/1/
Just in case you want to go that way, here is the jQuery code to do this:
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);
Working scripted example here: http://jsfiddle.net/MarkSchultheiss/CRCvU/3/