CSS / 10. Свободное перемещение и позиционирование

Конечно, CSS преображает содержимое, изменяя шрифты, фон и прочее, но как обстоит дело с выполнением основных задач верстки? Рассмотрим понятия свободное перемещение (floating) и позиционирование (positioning). Это инструменты, позволяющие обеспечить размещение содержимого в виде столбцов, наложение одной части макета на другую и вообще реализовать все то, для чего в течение многих лет применялись таблицы.
Статьи раздела '10. Свободное перемещение и позиционирование':
Блок-контейнер
Ранее в этой главе мы обсуждали блоки-контейнеры в связи с перемещаемыми элементами. В том случае блок-контейнер перемещаемого элемента был определен как ближайший блочный элемент-предок. Что касается позиционирования, то все не т...
Блоки-контейнеры и абсолютно позиционированные элементы
Абсолютно позиционированный элемент полностью удаляется из потока документа. Он позиционируется относительно его блока-контейнера, и местоположение его краев определяется с помощью свойств смещения (top, left и др.). Позиционирова...
Видимость элементов
Кроме отсечения и переполнения, можно также управлять видимостью всего элемента. Тут все довольно просто. Если для элемента задано visibility: visible, то он, конечно же, видимый. Если для элемента задано visibility: hidden, то он...
Задание ширины и высоты
Если необходимо задать ширину позиционированного элемента, очевидно, надо использовать свойство width. Аналогично свойство height позволяет объявить высоту позиционированного элемента. Однако задавать ширину и высоту элемента при ...
Запрет на обтекание
Мы достаточно поговорили о поведении при перемещении. Прежде чем перейти к позиционированию, обсудим еще один вопрос. Не всегда хочется, чтобы содержимое обтекало перемещаемый элемент, в некоторых случаях этого надо избежать. Если...
Запрет перемещения
Кроме значений left и right, свойство float имеет еще одно, float: none, которое применяется, чтобы вообще запретить перемещение элемента. Может показаться, что это не слишком умно, поскольку самый естественный путь предотвратить ...
Края, заданные значением auto
При абсолютном позиционировании элемента существует специальное поведение, которое применяется, когда всем свойствам смещения, кроме bottom, присваивается значение auto. В качестве примера возьмем свойство top: When we consid...
Ограничение ширины и высоты
Ширина элемента ограничивается при помощи свойств CSS2, которые я называю свойствами минимума-максимума (min-max properties). Для области содержимого можно задать минимальные размеры с помощью свойств min-width и min-height. Анало...
Относительное позиционирование
Самая простая для понимания схема позиционирования – относительное позиционирование. В этом случае позиционированный элемент сдвигается за счет применения свойств смещения. Однако это может иметь некоторые интересные последствия....
Отрицательные поля
Любопытно, что если задать отрицательные значения для полей, то перемещаемые элементы могут выйти за границы их родительских элементов. Кажется, что это полностью противоречит описанным выше правилам, но это не так. Точно так же, ...
Отсечение содержимого
Если содержимое абсолютно позиционированного элемента переполняет его блок элемента и свойство overflow определено так, что содержимое должно отсекаться, то, задав свойство clip, можно изменить форму области отсечения. По умолчани...
Перемещаемые элементы
О перемещении элементов необходимо помнить несколько моментов. Прежде всего, перемещаемый элемент некоторым образом удален из нормального потока документа, хотя все равно влияет на компоновку. Это совершенно уникально для CSS: пер...
Перемещаемые элементы, содержимое и перекрытие
Вот еще более интересный вопрос: что происходит, когда перемещаемый элемент перекрывает содержимое в нормальном потоке? Это может произойти, если, например, у перемещаемого элемента отрицательное поле с той стороны, где находится ...
Переполнение
Итак, предположим, что для некоторого элемента задан определенный размер и содержимое в него не помещается. Ситуацию можно взять под контроль посредством свойства overflow. Применяемое по умолчанию значение visible означает, что с...
Поведение на практике
Только что рассмотренные нами правила имеют ряд интересных последствий, являющихся как результатом того, о чем в них говорится, так и того, что в них не сказано. В первую очередь обсудим, что происходит, когда перемещаемый элемент...
Размещение и изменение размеров абсолютно позиционированных элементов
Сочетание понятий размещения и изменения размеров может показаться странным, но такова необходимость для абсолютно позиционированных элементов, потому что спецификация очень тесно объединила эти два процесса. При более детальном р...
Размещение и изменение размеров замещаемых элементов
Правила позиционирования для незамещаемых элементов отличаются от правил для замещаемых элементов. Причина в том, что замещаемые элементы имеют собственную высоту и ширину и, следовательно, меняют свои размеры, только если прямо о...
Размещение и изменение размеров незамещаемых элементов
В общем случае размер и размещение элемента зависят от его блока-контейнера. Значения его различных свойств (width, right, padding-left и т. д.) влияют на ситуацию, но главную роль играет блок-контейнер. Рассмотрим ширину и гориз...
Размещение относительно оси z
Продолжая разговор о позиционировании, неизбежно возникнут ситуации, когда два элемента попытаются сосуществовать на одном месте с визуальной точки зрения. Очевидно, одному из них придется перекрывать другой, но как управлять тем,...
Свободное перемещение
Вы почти наверняка знакомы с концепцией перемещаемых элементов. Еще со времен Netscape 1 существовала возможность перемещать изображения, объявляя, например, . При этом изображение будет перемещено вправо, а остальное содержимое (...

Страницы: 1 2