как разместить 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, а затем расположить их соответствующим образом в зависимости от размера содержимого каждого, как:

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

Смотрите этот обновленный пример, где я использовал ю вместо пикселей для позиции, дал родителю границу, так что вы видите его объем, и добавил вещи вокруг родителя. 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/

Answer 2

Вы можете добиться этого с чистым 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/