Как упорядочить строки (или элементы div) по вертикали, используя план CSS?

Question

У меня есть следующий HTML-код (в указанном порядке)

<div id="content">...</div>
<div id="footer">...</div>
<div id="header">...</div>

И, конечно же, я хочу отобразить часть заголовка вверху, затем часть содержимого и затем нижний колонтитул. Как я могу сделать это с помощью кода CSS, используя план?

P.S. : Контентная часть написана первой, чтобы быть более дружественной к SEO

РЕДАКТИРОВАТЬ: решение должно работать в любом порядке написания разделов div. Например, div "content" может быть записан в файле XHTML ПОСЛЕ div "footer" ... но я все еще хочу, чтобы нижний колонтитул отображался ниже содержимого (высота которого неизвестна, поскольку зависит от содержимого)

Answer 1

вы должны иметь возможность использовать абсолютное позиционирование и блокировать любой элемент div, чтобы размещать их в любом месте на странице.

например, возьмите код:

<div id="foo"></div>
<div id="bar"></div>

, чтобы полоса отображалась выше foo, если foo равно 100px, используйте следующее:

#bar{
   top:100px;
   left:0px;
   position:absolute;
   display:block;
}

Answer 2

Я не знаю, предоставляет ли проект эту функцию. Но это легко сделать простым CSS.

Я предполагаю, что высота заголовка фиксирована, скажем, 100px.

#header {
    height:100px;
    position: absolute;
    top: 0px;
}

#content{
    padding-top:100px;
}

Обновление:

Только что нашли два похожих вопроса:

• Макет CSS, используйте CSS для изменения порядка DIV
• CSS позиционирует div над другим div, если не в этом порядке в HTML

Они в основном совпадают с моим ответом (верхние высоты div известны) или используют JS, чтобы изменить их порядок.