CSS-свойства: перестановка блоков по вертикали

Изменить порядок вертикального расположения блоков на HTML-странице можно, по крайней мере, 2-мя способами:

  • представив их как табличные элементы;
  • придав им абсолютное позиционирование.

Рассмотрим каждый из указанных способов в отдельности.

Блоки как табличные элементы

Представить блоки в виде табличных элементов позволяет CSS-свойство display, среди доступных значений которого есть интересующие нас:

  • table – представляет элемент как таблицу;
  • table-header-group – представляет элемент как заголовок таблицы;
  • table-footer-group – представляет элемент как «подвал» таблицы;
  • table-row-group – представляет элемент как запись таблицы (отображается между элементами со значениями table-header-group и table- footer-group свойства display).

Работу такого способа иллюстрирует код HTML:

<style>
#container { display: table; }
#elem-3 { display: table-header-group; }
#elem-2 { display: table-row-group; }
#elem-1 { display: table-footer-group; }
</style>

<div id="container">
<div id="elem-1">1 element</div>
<div id="elem-2">2 element</div>
<div id="elem-3">3 element</div>
</div>

Еще можно прибегнуть к использованию значения table-caption свойства display в связке со свойством CSS caption-side (в значении top или bottom). В таком случае элемент будет представлен в виде подписи к таблице.

Рассмотренный способ хорош для большинства версий популярных браузеров, правда, есть несколько неприятных моментов:

  1. Использование значения table-caption свойства display в 11-й версии Opera приводит к проблеме «кликабельности» ссылок, расположенных в элементе с таким свойством; ссылки также не реагируют на наведение указателя мыши. Проблема описана в баг-трекере DSK-338752 на сайте Opera и, кажется, решена в 12 версии.
  2. Что касается браузера Internet Explorer – значение table CSS-свойства display начало поддерживаться в нем только с 8-й версии. К тому же, в 8-й версии IE временами обнаруживается такая ошибка: при первой попытке рендеринга страницы не отображается произвольное количество ячеек псевдо-таблицы. Значит для решения нашей задачи в «проблемных» версиях IE придется обратиться за помощью к JavaScript – поработать с положением блоков в DOM-дереве в скрипте:

if (document.all && !document.addEventListener) {
var el3 = document.getElementById('elem-3');
var el2 = document.getElementById('elem-2');
var el1 = document.getElementById('elem-1');

var parent_el = el1.parentNode;
parent.insertBefore(el1, parent.firstChild);
parent.insertBefore(el2, parent.firstChild);
parent.insertBefore(el3, parent.firstChild);
}

Абсолютное позиционирование блоков

Этот метод основывается на самой парадигме абсолютного позиционирования: элемент изымается из потока (Normal Flow) и жестко позиционируется относительно родительского элемента.
Фрагмент HTML-кода:

<style>
#container { height: 20px; border: 1px solid blue; }
#elem-1 { position: absolute; top: 150px; }
#elem-2 { position: absolute; top: 50px; }
#elem-3 { position: absolute; top: 0px; }
</style>

<div id="container">
<div id="elem-1">1 element</div>
<div id="elem-2">2 element</div>
<div id="elem-3">3 element</div>
</div>

При этом его положение уже не влияет на положение других элементов на странице, и может случиться, что выбранный пользователем размер шрифта «поломает» верстку (блоки расположатся один поверх другого за счет увеличения высоты какого-либо из них).
Рассмотрев оба способа перестановки блоков на HTML-странице посредством CSS-свойств, можно сделать вывод о предпочтительности применения первого из них, как более оптимального.

.Еще сайты сделаные нами: