Сделать абсолютное позиционирование div, увеличить родительскую высоту div
Как вы можете видеть в CSS ниже, я хочу, чтобы child2 позиционировал себя перед child1. Это связано с тем, что сайт, который я сейчас разрабатываю, должен также работать на мобильных устройствах, на которых child2 должен быть внизу, поскольку он содержит навигацию, которую я хочу, под контентом на мобильных устройствах. - Почему бы не 2 шедевры? Это только 2 элемента div, которые переставлены во всем HTML, так что 2 мастер-страницы для этого незначительного изменения являются излишним.
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2 имеет динамическую высоту, поскольку разные дочерние сайты могут иметь больше или меньше элементов навигации.
Я знаю, что элементы с абсолютным позиционированием удаляются из потока, поэтому другие элементы игнорируются.
Я пробовал настройкуoverflow:hidden;
на родительском div, но это не помогло, как и не исправление.
Моим последним средством будет javascript, чтобы соответствующим образом изменить положение двух элементов div, но сейчас я попытаюсь выяснить, существует ли не-javascript способ сделать это.