Фиксированное позиционирование 2


Содержание

5 особенностей позиционирования в CSS

В наши дни веб-разработчики могут строить сложные раскладки веб-страниц, используя различные техники CSS. Некоторые из этих техник имеют длинную историю (флоаты), другие (флексбокс) достигли популярности в последние годы.

В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования.

Перед тем как начать, давайте кратко вспомним основы различных типов позиционирования.

Обзор доступных способов позиционирования

Свойство CSS position определяет тип позиционирования элемента.

Опции для позиционирования

static это значение свойства позиционирования по умолчанию. Мы сообщаем, что этот элемент не использует позиционирование — позиционирование применяется, только если задать тип позиционирования, отличный от дефолтного.

Для этого надо свойству position задать одно из следующих значений:

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

  • top
  • right
  • bottom
  • left
  • Начальное значение этих свойств — ключевое слово auto .

Надо учитывать, что если у элемента задано свойство position в значении absolute или fixed , то он является абсолютно позиционированным элементом. Также у позиционированных элементов начинает работать свойство z-index , определяющее порядок наложения.

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

  • абсолютно ( absolute ) позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
  • относительно позиционированные ( relative ) и приклеенные ( sticky ) сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
  • фиксированные ( fixed ) элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом ( overflow:auto ). И только при отсутствии таких предков они позиционируются относительно зоны видимости.

Подробнее это можно рассмотреть в демо:

Примечание: позиционирование “приклеенных элементов” до сих пор является экспериментальной технологией с ограниченной поддержкой в браузерах. Конечно, при желании вы можете использовать полифилл, чтобы добавить этот функционал в браузер, но с учетом малой распространенности это свойство в статье обсуждаться не будет.

Позиционирование элементов с абсолютным типом позиционирования

Я уверен, что большинство знает принцип работы абсолютного позиционирования. Однако новичков многое в нем может смутить.

Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования.

Итак, абсолютно позиционированный элемент смещается относительно своего ближайшего спозиционированного предка. Конечно, это работает, если у кого-либо из предков position отличается от static — если у элемента нет спозиционированных предков, он смещается относительно зоны видимости.

Это демонстрируется следующим примером:

В этом демо зеленый блок изначально спозиционирован абсолютно с нулевыми отступами bottom:0 и left:0 , его предку (красному блоку) позиционирование не задавалось вообще.

Однако, мы относительно позиционировали внешнюю обертку (элемент с классом jumbotron ). Отметьте, как меняется позиционирование зеленого блока при изменении типа позиционирования его предков.

Абсолютно позиционированные элементы игнорируют свойство float

Если мы применим к плавающему элементу абсолютное или фиксированное позиционирование, свойство float получит значение none . С другой стороны, если мы зададим относительное позиционирование, элемент останется плавающим.

Взгляните на соответствующее демо:

В этом примере, мы определяем два разных элемента, уплывающих вправо. Отметьте, что когда красный блок становится абсолютно позиционированным, он игнорирует значение свойства float , в то время как относительно спозиционированный зеленый блок сохраняет значение float .

Абсолютно позиционированные строчные элементы становятся блочными

Строчный элемент с абсолютным или фиксированным позиционированием приобретает свойства блочного элемента. Подробнее конвертация строчных элементов в блочные описана в таблице.

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) — строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

При задании красному блоку абсолютного или фиксированного позиционирования, он становится блочным и заданные в нем размеры блока начинают действовать.

У абсолютно позиционированных элементов нет схлопывания внешних отступов

По умолчанию, когда у два вертикальных внешних отступа соприкасаются, они объединяются в один, равный максимальному из них. Это называется схлопывание внешних отступов.

Поведение абсолютно позиционированных элементов здесь схоже с плавающими элементами — их отступы не объединяются с соседними.

В этом демо элементу задан отступ в 20 пикселей. Его отступ коллапсирует с отступом родительского элемента, также равного 20 пикселям. Как видите, только при абсолютном позиционировании схлопывания не происходит.

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

Это может быть внутренний отступ ( padding ) или граница ( border ), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант — добавить клирфикс к родительскому элементу.

Позиционирование элементов с пикселями и процентами

Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов).

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

Смещение в процентах от ширины (для left и right ) или высоты ( top или bottom ) родительского блока. Для приклеенных элементов, смещение рассчитывается в процентах от ширины (для left и right ) или высоты ( top или bottom ) потока. Допустимы отрицательные значения.

Как было сказано, при задании смещения в процентах, позиция элемента зависит от ширины и высоты его родителя.

Демо показывает эту разницу:

В этом примере для смещения используются пиксели и проценты. Конечно, при задании смещения в пикселях элемент сдвигается туда, куда надо.

А если мы выберем проценты для смещения, результат будет зависеть от размеров родительского элемента. Вот визуализация показывающая, как рассчитывается новая позиция:

Примечание: как вы, наверное, знаете, свойство transform (вместе с различными функциями translate ) также позволяет изменить позицию элемента. Но в этом случае при использовании процентов расчет будет происходить на основе размер самого элемента, а не его родителя.

Заключение

Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности.

Свойство position

Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

Относительное позиционирование сдвигает элемент относительно его обычного положения.

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

Координаты

Для сдвига можно использовать координаты:

  • top – сдвиг от «обычной» верхней границы
  • bottom – сдвиг от нижней границы
  • left – сдвиг слева
  • right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

Свойства left/top не будут работать для position:static . Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

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

  1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
  2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.
  • Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
  • Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Всем привет, меня зовут Анна Блок, и эта статья будет посвящена довольно «острой» теме, которая связана с позиционированием элементов. Мы поговорим о таком свойстве как position и его значениях: relative, absolute и fixed. Также мы поговорим о таком значении как static, но по большей степени нас будет интересовать именно первая «троица», так как она чаще всего используется на сайтах.

Если ты постоянно задаешься вопросом, какое значение и в какой ситуации нужно использовать, то эта статья для тебя. Разбор начнём с теории и после на практике отражу примеры на сайте Codepen.

Position

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других элементов на web-странице. Сейчас на данный момент это свойство поддерживает 5 значений: absolute, fixed, relative, static и sticky.

Relative

Это относительное позиционирование. В данном случае положение элементов устанавливается относительно его исходного места, при этом если мы добавим такие свойства как: left, top, right и bottom, то мы изменим позицию элемента и сдвинем его в ту или иную сторону в зависимости от значений.

Absolute

Это абсолютное позиционирование. Когда мы указываем данное назначение, то мы даем понять, что элемент будет абсолютно позиционирован. При этом другие элементы отображаются на веб-странице так, словно этого абсолютного позиционирования на странице нет. Если у элемента стоит position: absolute , то мы также можем управлять его местоположение при помощи каких свойств как: left, top, right и bottom.

Static

Это статичное позиционирование. В этом случае элементы отображаются, как обычно. Использование таких свойств как: left, top, right и bottom не приводит ни каким результатам.

Fixed

Это фиксированное позиционирование. В данном случае мы можем также управлять местоположением при помощи left, top, right и bottom, но при этом он свое положение на странице не будет менять в момент в скролл страницы.

Sticky

Это сочетание относительного и фиксированного позиционирования. Когда мы пишем position: sticky , то элемент рассматривается как относительный, пока он не пересекает определённый порог, после чего он уже будет рассматриваться как фиксированный. Как правило, такое значение применяется для фиксации заголовка на одном месте до тех пор, пока содержимое, к которому относится заголовок, прокручивается на странице.

Стоит отметить, что свойство position поддерживается браузерами уже довольно давно, но на тот момент поддерживалась только три свойства: static, relative и absolute и уже начиная с IE 7, появилась поддержка fixed. Но при этом относительно новое значение sticky не поддерживается Internet Explorer-ом совсем и относительная поддержка у Edge начинается только с шестнадцатой версии. Во всех остальных браузерах такое свойство, как position поддерживается без проблем.

Практика

Теперь давайте перейдем к практике, и я покажу, как на деле работают эти свойства. В HTML зададим блок под названием box и внутри него установим элемент под названием item.

Для box мы визуально зададим пространство, задав ему ширину и высоту, добавив обводку.

Далее мы стилизуем item. Также установим для него ширину, высоту, цвет фона и скругление уголов блока.

Итак, именно с этим примером мы сейчас будем работать и рассмотрим, как будут вести себя элементы при разных значения position.

Absolute

Давайте предположим, что нам необходимо разместить круг в том же месте, как это отображено на картинке. Как это сделать? Если вспомнить теорию, то там было сказано, что такое свойство, как position: absolute задает абсолютное позиционирование для элемента, поэтому давайте так и поступим.
Элементу item добавим position: absolute. Однако для того, что бы наш position работал, нам необходимо начать работу в связке с такими свойствами, как: left, top, right и bottom. В зависимости положения объекта, мы будем использовать то или иное свойство. В нашем случае нам нужно разместить его относительно правой и нижней сторон квадрата.

И тут мы видим первую проблему, с которой сталкиваются новички — круг вышел за приделы блока box. Вы должны помнить, что если вы в CSS не указали, какой блок является родителем (относительно какого блока должен позиционироваться элемент), то он позиционирует дочерний элемент относительно всего тега body. Решается эта проблема добавлением свойства relative для блока box.

После того, как мы это сделали, наша точка вернулась на необходимое место.

Ознакомиться подробнее с HTML и CSS можно тут:


Fixed
Добавим в блок box текста, что создать автоматический скролл на странице.

Теперь наша задача сделать так, что бы наша точка «преследовала» нас, и все время находилась в одной части экрана, как на картинке.

Для этого блоку item задаем position: fixed и мы видим, что она как бы «выпадает» из потока и по умолчанию ей присваиваются такие свойства, как top: 0 и left: 0 . Но при этом, конечно же, мы их всегда можем сбросить, если укажем конкретные значения

И теперь в момент, когда мы скролим страницу эта точка «идет» за нами, она зафиксировалась в одной части экрана.

Ознакомиться подробнее с HTML и CSS можно тут:

Static
Я скопировала все стили, которые у нас применялись в первом примере и теперь мы поговорим о position: static . По умолчанию, если для элемента вы не устанавливаете position , то автоматически у него подразумевается такое значение, как position: static . Давайте представим, что в какой-то момент вам предстоит заняться адаптивом сайта. Вероятнее всего, вам потребуется менять ширину у блока box.

С этими значениями блок будет сворачиваться при любой ширине экрана, но при этом position у блока item мы можем установить, как position: static .

И как мы видим, он игнорирует все, что мы писали ранее, это right и bottom. Даже, если мы изменим значения, сделаем их больше или меньше это никак не повлияет на расположение данного элемента, так как position: static сбрасывает все это. Поэтому, если в какой-то момент вам необходимо сбросить стили, то помните, что достаточно прописать только position: static и в таком случае right , bottom , left , top менять в @media не потребуется.

Ознакомиться подробнее с HTML и CSS можно тут:

Sticky
Итак, теперь давайте рассмотрим четвертый пример. В нем мы создадим блок header, внутри которого содержится текст. Рядом создадим блок main, внутри которого размести блок side с текстом, что бы на странице появился скрол и блок sticky с заголовком. Под блоком main разместим еще один блок и назовем его footer с добавлением текста.

Таким образом, у нас получилась чистая разметка HTML. Ее мы и будем стилизовать. Начнем с блока side, установив ему ширину.

Далее стилизуем заголовок, задав ему цвет текста и цвет фона.

Далее главному блоку sticky добавим position: sticky . Визуально пока у нас ничего не изменилось, но при этом, что бы он «выпал» из потока нужно работать в связке с float , поэтому добавляем ему float: right . Как мы видим, при скроле он у нас не цепляется наверх, поэтому чтобы это исправить необходимо дописать top: 0 и задать ширину.

Теперь при скроле заголовок цепляется к верху и продолжает «идти» за нами по мере следования по странице.

Ознакомиться подробнее с HTML и CSS можно тут:

Вместо заключения

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

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Позиционирование блока относительно родителя с помощью position:fixed

За столь продолжительный период верстки сегодня мне впервые пришлось столкнуться с необходимостью разместить на странице фиксированный блок (используя CSS-свойство position:fixed ), который бы при скролле страницы всегда сидел в одном месте окна браузера.

Информацию по этому поводу я, естественно, почитал на разных блогах и форумах. Но все решения, которые я встретил, описывают немного не то, что понадобилось мне. Они описывают, как зафиксировать блок относительно края окна браузера, например, левый сайдбар или шапку.

У меня же стояла несколько иная задача. Имеется основной родительский блок с фиксированной шириной, выровненный по центру окна ( margin: 0 auto ). И необходимо справа от этого блока поместить фиксированный блок, т.е. позиционироваться он должен не от края окна браузера, а от основного блока. Вот готовый пример, о котором я веду речь.

Ниже расскажу, как я это реализовал, с учетом следующих моментов:

  • во-первых, с надеждой на то, что кому-нибудь это пригодится;
  • во-вторых, как шпаргалка себе на будущее (или написание поста с целью закрепления материала, аля «повторение — мать учения», моя практика показывает, что написание поста с решением какой-либо незнакомой мне до этого задачи очень хорошо помогает запомнить это самое решение);
  • в-третьих, с надеждой на то, что кто-то предложит более элегантное решение.

HTML-код

Имеем следующую базовую разметку:

CSS-код

Имеем следующие стили для основного и контентного блоков:

Т.е. у нас имеется основной контейнер шириной 885px, размещенный по центру окна, из них 642px отдано под контент, который будет находиться в левой части, а 243px в правой части выделяем под наш фиксированный блок шириной в 240px. Собственное это и делает идентификатор #wrapper .

Хочу заострить внимание на параметрах идентификатора #container , используемого для блока с основным контентом. Необходимо обязательно обозначить уровень этого слоя выше (здесь — z-index: 10 ), чем слой с фиксированным блоком (это согласно условиям моего примера, в других случаях сие может быть не обязательным), иначе в FireFox’e нельзя будет выделить текст в этом блоке в части высоты, равной высоте фиксированного блока.

Чтобы получить возможность привязать фиксируемый блок к основному контентному, я сначала задал фиксируемому блоку соответствующее позиционирование ( position: fixed ), растянув на всю ширину окна браузера, а затем поместил в него еще один блок, к которому применил абсолютное позиционирование относительно зафиксированного родительского блока, т.е. получилось следующее:

Подобрав отступ с помощью свойства left: 323px; к блоку .fixed , отцентрированному относительно окна браузера ( margin: 0 auto; ), я сдвинул фиксируемый блок в предназначенное для него место.

В результате у меня получилось то, что я и хотел. Смотрим пример всего описанного выше.

Данный пример прекрасно работает в следующих браузерах: Opera, FireFox, Safari, IE7, но не работает в…

Internet Explorer 6

Ну а как же без него? :) Само-знамо, курилка даже не представляет, ЧТО есть значение position: fixed , поэтому опять приходится латать его дыры его же ява-скриптами.

Чтобы укротить IE6 для нашей задачи, необходимо, во-первых, вместо position: fixed использовать абсолютное позиционирование position: absolute , во-вторых, применить expression , который и фиксирует блок. И поместим код в условные комментарии.

Вот что у нас получилось:

Объясняю, для чего здесь понадобились свойства left: 50%; и margin-left: -321px; . Дело в том, что, если использовать тот же самый отступ слева, что и для других браузеров, ( left: 323px; ), то фиксированный блок в IE6 ведет себя неправильно — при сужении окна браузера он смещается вправо от основного блока. Поэтому при помощи left: 50%; (данное свойство имеет здесь решающее значение, выявил «методом тыка») и следующего дополнительного отрицательного отступа блок возвращается на предназначенное ему место.

Все. Теперь и в IE6 мы наблюдаем тот же результат, что и в остальных браузерах.

Однако, если посмотрите на пример в этом браузере, то заметите следующий артефакт — при прокручивании страницы блок некрасиво подергивается. Чтобы устранить данный недостаток, необходимо тегу body назначить прозрачный фоновый рисунок с фиксированным позиционированием, т.е. вот так:

Что интересно, даже не обязательно наличие картинки pixel.gif на сервере, достаточно просто этой записи, чтобы дергание исчезло.

К сожалению, не всегда можно будет воспользоваться данным исправлением, поскольку фон body уже может быть занят элементом дизайна сайта. Тогда этот грех останется за IE6.

Вот, собственно, и все, о чем хотелось сказать в настоящей статье.

Отличный подарок на день рождения мальчику — игрушки лего, которые в большом ассортименте представлены в интернет-магазине «Lego для всех». Осуществляется доставка как в пределах России, так и по СНГ.

CSS позиционирование – шпаргалка для начинающих

CSS position — один из мощнейших инструментов, позволяющий размещать различные элементы в системе координат, что дарит определённую свободу в дизайне, выводя его за пределы обыкновенных решений.

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

Типы позиционирования в CSS

В HTML каждый элемент представляет собой некий прямоугольник, для которого необходимо указать внешние и внутренние отступы, а также границу, разделяющую их.

Схемы позиционирования определяют, где этот прямоугольник должен находиться и как должен влиять на окружающие его элементы.

Илон Маск рекомендует:  МакХост (mcHost) - виртуальный хостинг для Вашего сайта

В CSS свойство position может принять пять значений:

Все элементы веб-страницы по умолчанию позиционируются значением static . Это означает, что каждый элемент расположен в соответствии с естественным порядком добавления на страницу. Элементы блоков располагаются под элементами блоков, строчные — друг за другом.

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

Данный тип позиционирования удаляет элемент в общем потоке документа. Окружающие элементы игнорируют искомый так, будто ему присвоено свойство display: none; .

В том случае, если вы не хотите, чтобы пространство заполнялось другими элементами, вам нужно установить абсолютное позиционирование для элемента, указав свойства left , right , bottom и top . Если не указано ни одно свойство, для пары top-left присваивается значение 0.

Ключевым моментом абсолютного позиционирования является понимание точки отсчёта: такие элементы позиционируются относительно самого близкого родительского элемента с позиционированием, отличным от static . В том случае, если ближайший элемент не существует, позиционирование происходит относительно основного документа.

Относительное позиционирование

Элементы с относительным позиционированием располагаются относительно собственной позиции (сдвиг на основе своего стандартного месторасположения). При сдвиге изображения на его месте остаётся образ, относительно которого все элементы располагаются и накладываются друг на друга.

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

Для использования этого вида позиционирования, необходимо для свойства position указать значение relative :

  • Данный тип позиционирования не применим к табличным элементам (строки, колонки, ячейки и т. д.);
  • Место, которое элемент занимал до смещения, не заполняется выше- или ниже располагающимися элементами и остаётся пустым.

Для того чтобы позиционирование дочернего элемента выполнялось относительно родительского, для первого необходимо указать свойство position: absolute , а для второго — position: relative :

Фиксированное позиционирование

Данная схема позиционирования напоминает схему абсолютного позиционирования, однако имеются небольшие различия:

  • Фиксировано позиционированный элемент всегда игнорирует родительские элементы и располагается относительно окна браузера;
  • При пролистывании страницы элемент не смещается.

Зачастую фиксированное позиционирование применяется для создания вкладок, меню, заголовков и любых прочих элементов, которые должны быть постоянно видны пользователю сайта.

Z-Index

Веб-страницы являются двухмерными элементами, имея значения ширины и высоты, а свойство z-index добавляет странице глубину. Чем больше значение z-index , тем « выше » располагается элемент на странице, и наоборот, элемент с меньшим значением z-index находится за элементом с более высоким значением.

Таким способом можно добиться некой объёмности страницы.

Позиционирование фона

По умолчанию background (фон) страницы появляется в верхнем левом углу страницы, однако часто возникают ситуации, в которых необходимо задать конкретную позицию данного элемента (например, в том случае, если задний фон представляет собой большое изображение, занимающее всю страницу и, в отличие от контента, прокручиваться не должен).

Позиционирование фона страницы осуществляется при помощи свойства background-position , значениями которого могут являться процентные соотношения, числовые значения в разных единицах измерения, определённые ключевые слова.

  • background-position: center left;
  • background-position: bottom right;
  • background-position: 20% 90%;
  • background-position: 40px 40 px.

Процентные значения можно использовать совместно с единицами измерения: при указании одного параметра, второй автоматически принимает значение 50%.

Перечисленные схемы позиционирования определяют влияние элемента на соседние и правила его размещения на веб-странице.

Чаще всего при вёрстке используют свойство float , применяя позиционирование лишь для тех элементов, которые необходимо выделить из общего потока.

Фиксированное позиционирование 2

Фиксированное позиционирование является распространенным способом удержать в области просмотра браузера некоторые элементы. Достаточно часто на различных сайтах можно увидеть фиксированную панель навигации, которая не изменяет своего положения вне зависимости от прокрутки.

Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position . После этого с помощью стандартных свойств left , right , top и bottom можно определить конкретную позицию фиксированного элемента.

Создадим к примеру фиксированную панель навигации:

Чтобы растянуть фиксированный блок от левой до правой границы страницы, устанавливаются три свойства:

Для нижележащего блока с основным содержанием фиксированный элемент фактически не существует разметке, так как блок с фиксированным, как и с абсолютным позиционированием не учавствуют в стандартном потоке html. Поэтому по умолчанию оба блока будут накладываться друг на друга и размещатьс в одной точке. И нам надо должным образом разместить блок содержимого относительно фиксированного блока, например, установив нужный отступ:

Фактически отступ идет от границ области просмотра браузера, поэтому высота отступа должна быть больше высоты фиксированного элемента.

9 Модель визуального форматирования

В этой и следующей главах описывается модель визуального форматирования , т.е. метод, используемый агентами пользователей при обработке дерева документа с целью его отображения на устройствах визуального форматирования.

Согласно модели визуального форматирования каждый элемент дерева документа порождает произвольное количество (возможно, равное нулю) блоков в соответствии с моделью представления документа в виде блоков. Размещение этих блоков обуславливается:

  • размерами и типом блока;
  • схемой позиционирования (нормальный поток, перемещаемый объект или абсолютное позиционирование);
  • взаимодействиями между элементами в дереве документа;
  • внешней информацией (например, размерами области просмотра, собственными размерами изображений и т.п.).

Свойства, которые рассматриваются в этой и следующей главах, используются с устройствами, как не осуществляющими разбивки, так и с устройствами, осуществляющими постраничную разбивку документа. При этом в случае последнего типа устройств происходит преобразование значений свойств полей (подробную информацию можно получить в разделе о модели постраничного отображения документа).

Модель визуального форматирования не является исчерпывающим описанием формата вывода документа (например, она не определяет алгоритм задания межсимвольного интервала). Поэтому поведение конформных агентов пользователей, использующих элементы форматирования, которые не рассматриваются в данной спецификации, может быть различным.

9.1.1 Область просмотра

Агенты пользователей, управляющие выводом на устройства с постраничной разбивкой, предоставляют пользователям (окно или другую область экрана), с помощью которой пользователи взаимодействуют с документом. Агенты пользователей могут менять положение документа в случае изменения размера области просмотра (см. начальный контейнер). Если область просмотра меньше, чем начальный контейнер документа, агентам следует использовать механизм прокрутки. На каждую область вывода приходится не больше одной области просмотра, но агенты могут использовать несколько областей вывода (т.е. предоставлять несколько альтернативных вариантов отображения одного и того же документа).

В CSS2 положение и размеры блоков вычисляются относительно краев определенной области прямоугольной формы, называемой . Генерируемые блоки, как правило, являются контейнерами блоков, выступающих в качестве их потомков. В этом случае говорят, что блок «назначает» контейнер своему потомку. Выражение «контейнер блока» обозначает контейнер, в котором находятся рассматриваемый блок, но не контейнер, порожденный этим блоком.

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

Корневой элемент дерева документа порождает блок, который выступает в качестве для последующего вывода.

Ширину начального контейнера можно установить с помощью свойства ‘width’ корневого элемента. Если данному свойству присвоено значение ‘auto’, то агент пользователя использует начальное значение ширины (например, агент использует текущее значение ширины области просмотра).

Высоту начального контейнера можно установить с помощью свойства ‘height’ корневого элемента. Если данному свойству присвоено значение ‘auto’, то высота контейнера увеличится до размеров, позволяющих вмещать содержание документа.

Начальный контейнер нельзя позиционировать или перемещать (т.е. агенты пользователей игнорируют свойства ‘position’ и ‘float’ корневого элемента).

Подробная информация о том, как вычисляются размеры контейнера, находится в следующей главе.

В следующих разделах описаны различные типы блоков, которые можно создавать в CSS2. Тип блока частично влияет на его поведение в рамках модели визуального форматирования. Тип блока определяется с помощью свойства ‘display’ , описанного ниже.

К относятся элементы исходного документа, которые визуально форматируются в виде неких структурных единиц текста (например, абзацев). Принадлежность уровню блока определяется значениями свойства ‘display’ : ‘block’, ‘list-item’, ‘compact’ и ‘run-in’ (см. разделы, посвященные компактным и инициальным блокам), а также ‘table’.

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

Некоторые элементы уровня блока порождают дополнительные блоки за пределами главного: элементы ‘list-item’ и элементы с маркерами. Дополнительные блоки размещаются относительно главного блока.


Безымянные структурные блоки

В документе (считается, что для элементов DIV и P установлено значение ‘display: block’) элемент DIV имеет два типа содержимого: принадлежащего строке и принадлежащего блоку. Чтобы упростить процесс форматирования, предполагается, что надпись «Текст» заключена в безымянный структурный блок .

Рисунок, представляющий три типа блоков, один из которых является безымянным, например, верхний.

Другими словами, если структурный блок (подобный сгенерированному для элемента DIV) содержит в себе другой структурный блок (например, сгенерированный для элемента P), то он не должен содержать ничего, кроме структурных блоков. При этом каждый строковый блок вкладывается в безымянный структурный блок.

Такая модель в следующем примере может реализоваться, если использовать правила:

в приведенном ниже HTML-документе:

Элемент BODY содержит отрывок (C1) безымянного текста, после которого следует элемент уровня блока, за которым, в свою очередь, следует другой отрывок (C2) безымянного текста. В результате будут сгенерированы безымянный структурный блок для элемента BODY, который содержит безымянный структурный блок, заключающий в себя отрывок C1, структурный блок для элемента P и другой безымянный структурный блок, заключающий в себя отрывок C2.

Свойства безымянных блоков наследуются от содержащего их блока (например, порожденного элементом DIV), который не является безымянным. Ненаследуемые свойства принимают значения, используемые по умолчанию. Например, шрифт, используемый для отображения безымянного блока, наследуется от элемента DIV, но значение ширины его полей будет равно нулю.

— это элементы исходного документа, которые не формируют новых структурных единиц текста. Их содержимое выводится в строке (например, выделенные отрывки текста в абзаце или графические объекты, импортированные в текст). Определенные значения свойства ‘display’ делают элемент принадлежащим строке: ‘inline’, ‘inline-table’, ‘compact’ и ‘run-in’ (см. разделы, посвященные компактным и инициальным блокам). Элементы строкового уровня порождают строковые блоки.

Строковые блоки могут использоваться в контексте различных методологий форматирования:

  • в рамках структурного блока строковые блоки используются в контексте строкового форматирования;
  • компактный строковый блок располагается в поле структурного блока;
  • блоки, порожденные маркерами, также располагаются за пределами структурного блока.

Безымянные строковые блоки

В документе типа:

Элемент P порождает структурный блок, который содержит несколько строковых блоков. Блок, содержащий слово «выделенного», является строковым блоком, порожденным строковым элементом EM. Блоки, содержащие слова «Отрывок» и «текста», являются строковыми блоками, порожденными элементом P структурного уровня. Последние называются безымянными строковыми блоками , т.к. не существует элемента строкового уровня, который был бы связан с ними.

Наследуемые свойства безымянных строковых блоков принимают значения соответствующих свойств родительского структурного блока. Ненаследуемые свойства принимают значения, используемые по умолчанию. В этом примере цвет исходных безымянных блоков наследуется от элемента P, но фон остается прозрачным.

Если из контекста очевидно, о каком типе безымянных блоков идет речь, то безымянные строковые и структурные блоки в данной спецификации называются просто безымянными блоками.

При форматировании таблиц встречаются и другие типы безымянных блоков.

ведет себя следующим образом:

  • Если структурный блок (который не перемещается и не является абсолютно позиционируемым) следует за компактным блоком, то последний форматируется как строковый блок, расположенный на одной строке. Его результирующая ширина сравнивается с шириной одного из полей структурного блока. Выбор между левым и правым полем определяется свойством ‘direction’ , указанным для элемента, порождающего контейнер для компактного и следующего за ним блоков. Если ширина строкового блока меньше или равна ширине поля, то он располагается в поле. Об этом говорится ниже.
  • В противном случае компактный блок становится структурным блоком.

Расположение компактного блока на полях осуществляется следующим образом: он находится за пределами (слева или справа) первого строкового блока структурного блока, но при этом влияет на вычисление высоты строкового блока. Свойство ‘vertical-align’ компактного блока определяет его вертикальное положение относительно упомянутого строкового блока. В горизонтальной плоскости компактный блок всегда находится в поле структурного блока.

Элемент, который не может быть размещен на одной строке, не должен заходить на поля следующего блока. Например, элемент ‘compact’ в HTML, который включает элемент BR, всегда будет форматироваться как структурный блок (учитывая основной стиль элемента BR, который вставляет новую строку). Для размещения на полях текста, состоящего из нескольких строк, более всего подходит свойство ‘float’ .

В следующем примере представлен компактный блок.

Данный пример можно отформатировать следующим образом:

Свойство ‘text-align’ может использоваться для выравнивания компактного элемента внутри поля: по левому краю поля (‘left’), по правому краю поля (‘right’) или по центру поля (‘center’). Значение ‘justify’ не используется и интерпретируется как ‘left’ или ‘right’, в зависимости от свойства ‘direction’ элемента уровня блока, в поле которого производилось форматирование компактного элемента (‘left’ если значение направления равно ‘ltr’, ‘right’ если оно равно ‘rtl’.)

Информацию о взаимодействии компактных блоков с генерируемым содержимым можно получить в разделе о генерируемом содержимом.

ведет себя следующим образом:

  • Если структурный блок (который не перемещается и не является абсолютно позиционируемым) следует за инициальным блоком, то последний становится первым строковым блоком структурного блока.
  • В противном случае инициальный блок становится структурным блоком.

Инициальный блок оказывается удобным при вставке заголовков, как это показано в следующем примере:

Данный пример может быть отформатирован следующим образом:

Свойства инициального элемента наследуются от родительского элемента исходного дерева, а не от структурного блока, частью которого он становится в процессе визуального форматирования.

Информацию о взаимодействии инициальных блоков с генерируемым содержимым можно найти в разделе о гененерируемом содержимом.

9.2.5 Свойство ‘display’

‘display’

Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | наследуемое
Начальное значение: строковое
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Устройства: все

Значения этого свойства:

block При этом значении свойства элемент порождает главный структурный блок. inline При этом значении свойства элемент порождает один или несколько строковых блоков. list-item При этом значении свойства элемент (например, LI в HTML) порождает главный структурный блок и строковый блок элемента списка. Информацию о списках и примерах форматирования списков можно найти в разделе о списках. marker При этом значении свойства генерируемое содержимое, располагающееся до или после блока, становится маркером. Данное значение должно использоваться только с псевдоэлементами :before и :after, прикрепленным к элементам структурного уровня. В остальных случаях данное значение интерпретируется как ‘inline’. Дополнительную информацию можно найти в разделе о маркерах. none При этом значении свойства элемент не порождает ни одного блока в структуре форматирования (т.е. элемент никак не влияет на отображение документа). Потомки этого элемента тем более не будут порождать никаких блоков, даже если для их свойства ‘display’ установлено другое значение.

Обратите внимание, что в результате использования значения ‘none’ не создается вообще никакого блока, в том числе и невидимого. В CSS имеются такие механизмы, которые позволяют элементам порождать в структуре форматирования определенные блоки, влияющие на форматирование, но при этом явно не отображаемые. Подробную информацию можно найти в разделе о видимости. run-in и compact Эти значения свойства в зависимости от контекста создают структурный или строковый блок. Применение свойства к инициальному или компактному блоку осуществляется, исходя из его окончательного статуса (является ли он строковым или структурным блоком). Например, свойство ‘white-space’ применимо, только если блок становится структурным. table , inline-table , table-row-group , table-column , table-column-group , table-header-group , table-footer-group , table-row , table-cell и table-caption При этих значениях свойства элемент ведет себя как элемент таблицы (ограничения рассматриваются в главе о таблицах).

Необходимо помнить, что хотя в качестве начального значения свойства ‘display’ используется значение ‘inline’, правила, содержащиеся в таблице стилей, используемой агентом пользователя по умолчанию, могут переназначить его. Подробную информацию можно найти в приложении при рассмотрении примера таблицы стилей для HTML 4.0.

Далее представлено несколько примеров использования свойства ‘display’ :

Конформные агенты пользователей, управляющие отображением HTML-документов, могут игнорировать свойство ‘display’ .

9.3 Схемы позиционирования

В CSS2 блок может размещаться согласно трем :

  1. Нормальный поток. В CSS2 модель нормального потока включает форматирование блокаструктурного уровня, строковое форматированиестроковых блоков, относительное позиционирование структурных или строковых блоков, а также позиционирование компактных и инициальных блоков.
  2. Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются максимально влево или вправо насколько это возможно. Отображаемое содержимое может располагаться по сторонам перемещаемого элемента.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно контейнера.

9.3.1 Выбор схемы позиционирования: свойство ‘position’

Свойства ‘position’ и ‘float’ определяют алгоритм позиционирования CSS2, используемый для определения положения блока.

‘position’

Значение: static | relative | absolute | fixed | inherit
Начальное значение: static
Область применения: все элементы, кроме генерируемого содержимого
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Значения этого свойства:

static Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства ‘left’ и ‘top’ не применяются. relative Положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока B используется модель относительного позиционирования, тогда положение следующего блока рассчитывается так, как будто блок B не был смещен. absolute Положение блока (возможно и размер) указывается с помощью свойств ‘left’ , ‘right’ , ‘top’ и ‘bottom’ . Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются ни с какими другими полями. fixed Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). У разработчиков существует возможность сделать определение значения ‘fixed’ аппаратно-зависимым. Например, разработчик может сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но не печатной страницы этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано ниже:

Говорят, что элементу была присвоена , если для свойства ‘position’ устанавливается значение, отличное от ‘static’. Позиционированные элементы порождают позиционированные блоки, положение которых регулируется с помощью следующих четырех свойств:

‘top’

Значение: | | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно высоты контейнера
Устройства: визуального форматирования

Это свойство задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.

‘right’

Значение: | | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно к ширины контейнера
Устройства: визуального форматирования

Это свойство задает смещение правого сегмента внутренней краевой линии влево относительно правого сегмента краевой линии контейнера блока.

‘bottom’

Значение: | | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно высоты контейнера
Устройства: визуального форматирования

Это свойство определяет смещение нижнего сегмента внутренней краевой линии вверх относительно нижнего сегмента краевой линии контейнера блока.

‘left’

Значение: | | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно ширины контейнера
Устройства: визуального форматирования

Это свойство определяет смещение левого сегмента внутренней краевой линии вправо относительно левого сегмента краевой линии контейнера блока.

Значения этих четырех свойств имеют следующий смысл:

Смещение задается фиксированным значением расстояния от исходной краевой линии. Смещение задается процентным соотношением относительно ширины (для свойств ‘left’ и ‘right’ ) или высоты (для свойств ‘top’ и ‘bottom’ ) контейнера. Если высота контейнера не указана точно (т.е. зависит от высоты содержимого), то процентное соотношение, определяющее значение свойств ‘top’ и ‘bottom’, интерпретируется как значение ‘auto’. auto Действие данного значения зависит от того, какие из свойств, близких по своему содержанию к рассматриваемым, также имеют значение ‘auto’. Подробную информацию можно найти в разделах, посвященных ширине и высоте абсолютно позиционируемых и неперемещаемых элементов.

Для абсолютно позиционируемых блоков смещение осуществляется относительно контейнера. Для относительно позиционируемых блоков смещение осуществляется относительно внешней краевой линии самого блока (сначала блоку присваивается положение в нормальном потоке, а затем с использованием названных свойств указывается смещение относительно этого положения).

Блоки, содержащиеся в нормальном потоке, принадлежат контексту форматирования , который может быть либо блоковым, либо строковым, но не тем и ни другим одновременно. Структурные блоки участвуют в контексте форматирования блоков. Блоки строкового уровня участвуют в контексте форматирования строк.

9.4.1 Контекст форматирования блоков

В контексте форматирования блоков блоки располагаются друг за другом вертикально, начиная с верхнего края контейнера. Вертикальное расстояние между двумя сестринскими блоками определяется с помощью свойства ‘margin’ . В контексте форматирования блоков вертикальные поля между соседними структурными блоками перекрываются.

В контексте форматирования блоков каждый левый сегмент внешнего края блока соприкасается с левым сегментом краевой линии контейнера (при форматировании справа налево соприкасаются правые края). Это справедливо и при наличии перемещаемых объектов (хотя при этом область содержимого блока может сократиться).

Информацию о разделителях страниц, используемых в устройствах с постраничной разбивкой, можно найти в разделе о допустимых разделителях страниц.

В контексте форматирования строк блоки располагаются горизонтально, один за другим, начиная с верхнего края контейнера. Горизонтальные поля, границы и отступы внутри этих блоков сохраняются. Существуют различные способы вертикального выравнивания блоков: по нижнему или по верхнему краю или по уровню содержащегося в них текста. Прямоугольная область, которая содержит блоки, формирующие одну строку, называется .

Ширина линейного блока определяется шириной контейнера. Высота линейного блока регулируется правилами, описанными в разделе «Вычисление высоты строк». Линейный блок всегда имеет высоту достаточную, чтобы вместить все блоки. Однако он может быть выше, чем самый высокий блок, содержащийся внутри, (если, например, блоки выровнены таким образом, что подошвы текста находятся на одной оси). Если высота блока B меньше, чем высота линейного блока, в котором он находится, то вертикальное выравнивание блока B внутри последнего определяется свойством ‘vertical- align’ .

Если несколько строковых блоков не могут разместиться горизонтально в пределах одного линейного блока, то они распределяются по двум или более вертикально расположенными линейным блоками. Таким образом, абзац представляет собой набор вертикально расположенных линейных блоков. Линейные блоки не находят друг на друга и не разделаются никакими вертикальными промежутками.

Обычно левый край линейного блока соприкасается с левым краем контейнера, а правый край — с правым краем контейнера. Однако иногда между их соответствующими краями могут располагаться перемещаемые блоки. Поэтому, хотя в одном контексте строкового форматирования линейные блоки обычно имеют одинаковую ширину (равную ширине контейнера), она все же может изменяться в зависимости от размеров доступного горизонтального пространства, оставляемого перемещаемым объектом. Линейные блоки в одном и том же контексте строкового форматирования зачастую различаются по высоте (например, одна строка может содержать вытянутый графический объект, в то время как другая — только текст).

Когда суммарная ширина строковых блоков, упорядоченных в строку, меньше ширины содержащего их линейного блока, то горизонтальное распределение этих блоков определяется с помощью свойства ‘text-align’ . Если ему присвоено значение ‘justify’, то агент пользователя может увеличить длину строковых блоков.

Поскольку ширина строкового блока не может превышать ширину линейного блока, длинные строковые блоки разбиваются на несколько отдельных сегментов, которые затем распределяются по нескольким линейным блокам. Когда строковый блок разбивается на части, то в месте разбиения поля границы и отступы визуально не отображаются. Форматирование полей, границ и отступов будет определено не полностью, если разбиение производится внутри двунаправленной вставки.

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

Здесь представлен пример построения строкового блока. Следующий абзац (созданный элементом P уровня блока, принадлежащим языку HTML) включает безымянный текст, в который вставлены элементы EM и STRONG:

Элемент P порождает структурный блок, содержащий пять строковых блоков, три из которых являются безымянными:

  • Безымянный: «В этом»
  • EM: «предложении,»
  • Безымянный: «дорогая,»
  • STRONG: «несколько выделенных»
  • Безымянный: «слов.»

Чтобы отформатировать этот абзац, агент пользователя помещает все пять блоков в линейные блоки. В этом примере блок, сгенерированный для элемента P, назначает контейнер для линейных блоков. Если контейнер имеет достаточную ширину, то все строковые блоки поместятся в один линейный блок:

В противном случае строковые блоки будут разбиты на части, которые затем будут распределены по нескольким линейным блокам. Предыдущий абзац может быть разбит следующим образом: или по-другому:

В последнем случае блок, порожденный элементом EM, был разбит на две части (назовем их «split1» и «split2»). Поля, границы, отступы или элементы текстового оформления не отображаются после split1 или перед split2.

Рассмотрим следующий пример:

В зависимости от ширины элемента P блоки могут распределяться следующим образом:

  • Поля располагаются до слова «несколько» и после слова «выделенных».
  • Отступы располагаются до, сверху и снизу слова «несколько» и после, сверху и снизу слова «выделенных». В обоих случаях с трех сторон слова окружены штрих-пунктирной границей.

После того как блок был размещен в соответствии с моделью нормального потока, он может быть смещен относительно исходного положения. Данная процедура называется . Подобное смещение блока (B1) не влияет на следующий за ним блок (B2): блоку B2 назначается положение так, как если бы смещение блока B1 не производилось, и это положение не изменяется, даже если блок B1 после этого будет перемещен. Отсюда следует, что при относительном позиционировании может происходить наложение блоков.

Относительно позиционируемые блоки сохраняют типичные размеры перемещаемых объектов, включая разрывы строк и отведенное для них пространство. Относительно позиционируемый блок назначает новый контейнер для дочерних элементов нормального потока и размещаемых потомков.

Элемент порождает относительно позиционируемый блок, если для его свойства ‘position’ установлено значение ‘relative’. Смещение определяется с помощью свойств ‘top’ , ‘bottom’ , ‘left’ и ‘right’ .

Динамическое перемещение относительно позиционируемых блоков способно порождать эффекты анимации в текстовом окружении (см. также свойство ‘visibility’ ). Относительное позиционирование можно использовать как основное средство для создания верхних и нижних индексов, если только высота строки не регулируется автоматически, препятствуя осуществлению позиционирования. Дополнительную информацию можно найти в разделе о вычислении высоты строк.

Перемещаемый объект — это блок, который смещается по строке в левую или правую сторону. Самым интересным свойством перемещаемого объекта является то, что содержимое может передвигаться вдоль одной из его сторон (либо не делать этого, если существует запрет, устанавливаемый свойством ‘clear’ ). Содержимое может передвигаться вдоль правой стороны левостороннего перемещаемого блока и вдоль левой стороны правостороннего перемещаемого блока. Далее приводится описание принципов позиционирования перемещаемых объектов и потока содержимого. Конкретные правила, управляющие поведением перемещаемых объектов, приводятся в описании свойства ‘float’ .

У перемещаемого блока должна быть явно задана ширина (назначается с помощью свойства ‘width’ или у него должно быть собственное значение ширины в случае, когда он является заменяемым элементом). Любой перемещаемый блок становится структурным блоком, сдвинутым влево или вправо, если его внешний край не соприкасается с краем контейнера или другого перемещаемого блока. Верхняя часть перемещаемого блока выравнивается по верхней части текущего линейного блока (или, в случае его отсутствия, по нижней части предшествующего структурного блока). Если в текущей строке недостаточно свободного места для перемещаемого объекта, то он последовательно, строка за строкой, перемещается вниз до тех пор, пока не найдется строка, в которой для него найдется достаточное количество места.

Т.к. перемещаемый объект не принадлежит потоку, то вертикальное передвижение непозиционированных блоков, созданных до и после него, будет осуществляться так, как если бы он отсутствовал. Линейные блоки, следующие непосредственно за перемещаемым объектом, укорачиваются, чтобы освободить для него место. Содержимое строки, находящейся перед перемещаемым объектом, выводится заново с другой стороны от него в самой первой доступной строке.

Эта модель применима и к перемещаемым объектам, соседствующим друг с другом в одной и той же строке.

Следующее правило перемещает все блоки, порожденные элементом IMG с , влево (и устанавливает значение ширины поля равным нулю):

Рассмотрим следующий исходный HTML-документ и таблицу стилей:

Блок, порожденный элементом IMG, перемещается влево. Следующее за ним содержимое форматируется справа от него, начиная с той же строки, на которой находится он сам. Присутствие перемещаемого объекта влияет на то, что, пока линейные блоки находятся справа от него, они укорачиваются, но как только они достигают его конца, так сразу восстанавливают свою исходную ширину (равную ширине контейнера, назначенного элементом P). Приведенный документ может быть отформатирован следующим образом:

Форматирование было бы точно таким же, если бы документ выглядел так:

Объясняется это тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.

Поля перемещаемых блоков никогда не перекрываются с полями соседних блоков. Таким образом, в предыдущем примере вертикальные поля блока, порожденного элементом P, и поля перемещаемого блока, порожденного элементом IMG, не перекрываются.

Перемещаемый объект может перекрывать другие блоки в нормальном потоке (например, если ширина полей блока, находящегося в нормальном потоке и расположенного рядом с перемещаемым объектом, имеет отрицательное значение). Когда происходит наложение перемещаемого объекта и строкового блока, то содержимое, фон и границы последнего выводятся поверх перемещаемого объекта. Когда происходит наложение перемещаемого объекта и структурного блока, то фон и границы последнего выводятся за перемещаемым объектом и видны только там, где он прозрачен. Содержимое структурного блока выводится поверх перемещаемого объекта.

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

Перемещаемое изображение затеняет границы перекрываемых им структурных блоков.

В следующем примере проиллюстрировано использование свойства ‘clear’ , позволяющего запрещать перемещение содержимого вдоль относительно объекта.

может привести к следующему форматированию:

В обоих абзацах установлено свойство ‘clear: left’, при действии которого второй абзац «принудительным образом» располагается ниже перемещаемого объекта. Для этого увеличивается ширина его верхнего поля (см. свойство ‘clear’ ).


9.5.1 Позиционирование перемещаемого объекта: свойство ‘float’

‘float’

Значение: left | right | none | inherit
Начальное значение: none
Область применения: все перемещаемые объекты и генерируемое содержимое
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Данное свойство определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов, порождающих блоки, не являющиеся абсолютно позиционируемыми. Значения данного свойства имеют следующий смысл:

left Элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства ‘clear’ ). Свойство ‘display’ игнорируется, если ему не присвоено значение ‘none’. right Подобно значению ‘left’ с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха. none Блок не перемещается.

Ниже приведены четкие правила , определяющие поведение перемещаемых объектов:

  1. Левый внешний край левостороннего перемещаемого блока не может находиться слева от левого края контейнера. Подобное правило имеет место и для правостороннего перемещаемого блока.
  2. Если текущий перемещаемый блок является левосторонним и существует хотя бы один левосторонний перемещаемый блок, который был сгенерирован в исходном документе раньше него, то левый внешний край текущего блока должен находиться справа от правого внешнего края предыдущего блока, или верхний его край должен быть ниже, чем нижний край предыдущего блока. Подобное правило имеет место и для правостороннего перемещаемого блока.
  3. Правый внешний край левостороннего перемещаемого блока не может находиться справа от левого внешнего края любого правостороннего перемещаемого блока. Подобное правило имеет место и для правостороннего перемещаемого блока.
  4. Верхний сегмент внешнего края перемещаемого блока не может быть выше аналогичной границы контейнера.
  5. Верхний сегмент внешнего края перемещаемого блока не может быть выше аналогичной границы любого структурного или перемещаемого блока, который был сгенерирован в исходном документе раньше рассматриваемого перемещаемого блока.
  6. Верхний сегмент внешнего края перемещаемого блока не может быть выше аналогичной границы любого линейного блока , содержащего блок, который был сгенерирован в исходном документе раньше рассматриваемого перемещаемого блока.
  7. Левосторонний перемещаемый блок, слева от которого расположен другой левосторонний перемещаемый блок, может не иметь правого внешнего края, расположенного справа от правого края его контейнера. (Иногда левосторонний перемещаемый блок может не выдаваться справа до тех пор, пока он не будет помещен как можно левее). Подобное правило имеет место и для правостороннего перемещаемого блока.
  8. Перемещаемый блок должен быть помещен как можно выше.
  9. Левосторонний перемещаемый блок должен быть помещен как можно левее, а правосторонний перемещаемый блок — как можно правее. Самое верхнее положение должен занимать блок, который занимает более крайнее левое/правое положение.

‘clear’

Значение: none | left | right | both | inherit
Начальное значение: none
Область применения: элементы структурного уровня
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Это свойство определяет, какие стороны блока, порожденного элементом, не могут соседствовать с предшествующим перемещаемым блоком. (Может случиться, что у элемента имеются перемещаемые потомки. Свойство ‘clear’ не влияет на них.)

Данное свойство применимо только к элементам уровня блока (включая перемещаемые объекты). В случае компактных и инициальных блоков это свойство применяется к структурному блоку, которой в итоге будет их содержать.

Перечисленные ниже значения при их использовании для неперемещаемых структурных блоков приобретают следующий смысл:

left Верхнее поле генерируемого блока увеличивается до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого левостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом. right Верхнее поле генерируемого блока увеличивается до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого правостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом. both Генерируемый блок помещается ниже всех перемещаемых блоков, которые были сгенерированы в исходном документе предыдущими элементами. none Никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.

Когда это свойство применяется к перемещаемым объектам, оно приводит к изменениям в правилах позиционирования перемещаемых объектов. При этом добавляется дополнительное ограничение (#10):

  • Верхний внешний край перемещаемого объекта должен находиться ниже нижнего внешнего края всех ранее созданных левосторонних перемещаемых блоков (‘clear: left’) или правосторонних перемещаемых блоков (‘clear: right’), или и тех и других сразу (‘clear: both’).

В модели абсолютного позиционирования величина смещения блока относительно его контейнера задается явно. Он полностью удаляется из нормального потока (так что не влияет на последующие сестринские элементы). Абсолютно позиционированный блок назначает новый контейнер для дочерних элементов из нормального потока и позиционируемых потомков. Содержимое абсолютно позиционируемого элемента не перемещается вокруг других блоков. Оно может затенять (или не затенять) содержимое другого блока в зависимости от уровней расположения накладывающихся блоков.

Если в данной спецификации элемент (или порожденные ими блоки) называется , это означает, что для свойства ‘position’ данного элемента установлено значение ‘absolute’ или ‘fixed’.

Фиксированное позиционирование является разновидностью абсолютного позиционирования. Единственным его отличием является то, что при фиксированном позиционировании контейнер определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они схожи с фиксированными фоновыми изображениями. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это оказывается удобным, например, при размещении подписей в нижней части каждой страницы.

Разработчики могут использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации:

Подобный эффект можно достичь с помощью следующего кода HTML и правил стиля:

9.7 Взаимодействие свойств ‘display’, ‘position’ и ‘float’

Три свойства, влияющие на создание и размещение блока — ‘display’ , ‘position’ и ‘float’ — взаимодействуют следующим образом:

  1. Если свойство ‘display’ принимает значение ‘none’, то агент пользователя должен проигнорировать свойства ‘position’ и ‘float’ . В данном случае элемент не породит ни одного блока.
  2. Если свойство ‘position’ принимает значение ‘absolute’ или ‘fixed’, то свойству ‘display’ присваивается значение ‘block’, свойству ‘float’ — значение ‘none’, а положение блока определяться свойствами ‘top’ , ‘right’ , ‘bottom’ и ‘left’ , а также контейнером блока.
  3. Если свойство ‘float’ принимает значение, отличное от ‘none’, то свойству ‘display’ присваивается значение ‘block’, а блок становится перемещаемым.
  4. Остальные значения свойства ‘display’ ведут себя согласно их описанию.

Примечание. В CSS2 ничего не говорится о том, что произойдет, если значения этих свойств будут изменены в результате выполнения некоторых сценариев. Например, что произойдет, если элемент, имеющий значение ‘width: auto’, будет перемещен? Будет ли перемещено его содержимое или оно сохранит прежнее форматирование? Ответа на этот вопрос данный документ не дает, и поведение для различных реализаций CSS2 будет практически разным.

Чтобы продемонстрировать различия между нормальным потоком, относительным позиционированием, перемещаемым объектом и абсолютным позиционированием, предлагается несколько примеров на основе следующего фрагмента кода HTML:

Предположим, что в данном документе используются следующие правила:

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

Рассмотрим следующие объявления языка CSS «outer» и «inner«, которые не вносят изменений в нормальный поток блоков:

Элемент P заключает в себе все содержимое строки: безымянный текст строки и два элемента SPAN. Поэтому все содержимое будет отображаться в контексте строкового форматирования внутри контейнера, порожденного элементом P. В результате получится следующее:

Чтобы пронаблюдать результаты использования относительного позиционирования, можно воспользоваться следующими правилами:

Текст обычным образом достигает внешнего элемента. Затем внешний текст принимает те размеры и то положение в конце строки 1, которые назначаются ему в нормальном потоке. Далее строковые блоки, включающие текст (занимающий три строки), перемещаются как единое целое на ‘-12px'(вверх).

Содержимое внутреннего элемента, выступающего в роли дочернего элемента внешнего, будет отображено обычным образом после слов «внешнего текста» (в строке 1.5). Однако сам внутренний текст смещается относительно внешнего на ’12px’ (вниз) на свое нормальное положение в строке 2.

Обратите внимание, что относительное позиционирование внешнего элемента не оказывает никакого влияния на текст, следующий за внешним элементом.

Заметьте, что если бы внешний элемент был смещен на ‘-24px’, то произошло бы наложение содержимого внешнего и основного элементов.

Рассмотрим результат перемещения текста внутреннего элемента к правому краю с использованием следующих правил:

Текст обычным образом выводится до внутреннего блока, который изымается из нормального потока и перемещается к правому полю (значение ‘width’ его ширины было указано явно). Линейные блоки, находящиеся слева от перемещаемого объекта, укорачиваются, и оставшаяся часть текста документа отображается в них.

Чтобы продемонстрировать эффективность работы свойства ‘clear’ , добавим в пример сестринский элемент:

как и ранее приводят к перемещению внутреннего блока к правому краю, а оставшаяся часть текста документа перемещается на освободившееся место:

Однако если для свойства ‘clear’ сестринского элемента установлено значение ‘right’ (т.е. генерируемый сестринский блок не располагается следом за перемещаемым блоком справа), то сестринский текст будет выводиться ниже перемещаемого объекта:

И наконец, рассмотрим результат применения модели абсолютного позиционирования. Рассмотрим следующие объявления outer и inner:

В результате верхняя часть внешнего блока размещается относительно контейнера. Контейнер для размещаемого блока назначается ближайшим размещенным предком (или, в случае отсутствия такового, начальным контейнером, как в данном примере). Верхняя сторона внешнего блока находится на ‘200px’ ниже верхней стороны контейнера, а левая сторона на ‘200px’ правее его левой стороны. Дочерний блок внешнего блока перемещается обычным образом относительно его родительского блока.

В следующем примере показан абсолютно позиционируемый блок, дочерний по отношению к относительно позиционируемому блоку. Хотя родительский внешний блок не смещен, присвоение его свойству ‘position’ значения ‘relative’ означает, что он может служить контейнером для позиционируемых потомков. Т.к. внешний блок является строковым блоком, разбиваемым на сегменты, распределяемые по нескольким строкам, то в качестве нулевой точки отсчета для смещения ‘top’ и ‘left’ выступают верхний и левый края первого сегмента (изображенные на рисунке толстыми пунктирными линиями).

В результате получим:

Если внешний блок не позиционируется, т.е. используются правила

то контейнером для внутреннего блока становится начальный контейнер (как в данном примере). На следующем рисунке показано окончательное расположение внутреннего блока.

Относительное и абсолютное позиционирование может использоваться для вставки маркеров исправлений, как показано в следующем примере. Документ

приведет к следующему представлению:

Сначала позиционирование абзаца (стороны контейнера которого показаны на рисунке) осуществляется согласно модели нормального потока. Затем он смещается на ’10px’ относительно левого края контейнера (таким образом, правое поле размером в ’10px’ было предусмотрено для компенсации этого смещения). Два тире, выполняющие роль маркеров исправлений, изымаются из потока и помещаются на текущей строке (с помощью свойства ‘top: auto’) на расстоянии ‘-1em’ от левого края контейнера (назначенного элементом P в момент его окончательного позиционирования). В результате создается эффект перемещения маркеров исправлений влево по текущей строке.

В следующих разделах выражения «поверх» или «спереди» означают, что объект расположен ближе к пользователю, обращенному лицом к экрану.

В CSS2 каждый блок размещается в трехмерном пространстве. Помимо горизонтальных и вертикальных координат блоки имеют координаты вдоль «оси z», располагаясь один поверх другого. Позиционирование объектов вдоль оси z оказывается удобным, когда визуально происходит их наложение. В этом разделе обсуждаются способы позиционирования блоков вдоль оси z.

Любой блок обладает единственным . У каждого блока в заданном позиционном контексте имеется , который указывает его положение на оси z относительно других блоков этого же контекста. Блоки с более высоким позиционным уровнем всегда выводятся поверх блоков с меньшим позиционным уровнем. Позиционный уровень блока может иметь отрицательное значение. Блоки, находящиеся в одном и том же позиционном контексте и обладающие одинаковым позиционным уровнем, располагаются снизу вверх, в зависимости от их расположения в дереве документа.

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

Элемент, назначающий локальный позиционный контекст, порождает блок, который имеет два позиционных уровня: первый относится к создаваемому им позиционному контексту (всегда равен нулю), а второй — к позиционному контексту, в котором он находится (указывается свойством ‘z-index’ ).

Блок, порождаемый элементом, имеет тот же позиционный уровень, что и его родительский блок, если ему не был присвоен другой уровень с использованием свойства ‘z-index’ .

9.9.1 Определение позиционного уровня: свойство ‘z-index’


‘z-index’

Значение: auto | | inherit
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Для размещенного блока свойство ‘z-index’ указывает:

  1. Позиционный уровень блока в текущем позиционном контексте.
  2. Назначает ли блок локальный позиционный контекст.

Значения данного свойства имеют следующий смысл:

«> Данное значение является значением позиционного уровня сгенерированного блока в текущем позиционном контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем ‘0’. auto Позиционный уровень сгенерированного блока в текущем позиционном контексте совпадает с позиционным уровнем родительского блока. Блок не назначает нового локального позиционного контекста.

Данный пример поясняет понятие прозрачности. По умолчанию блок ведет себя так, что другие блоки, находящиеся за ним, видны сквозь прозрачную область его содержимого. В данном примере каждый блок, накладывающийся на другие блоки, является прозрачным. Такой тип поведения может быть переназначен посредством использования одного из существующих свойств фона.

9.10 Направление вывода текста: свойства ‘direction’ и ‘unicode-bidi’

Символы определенных в некоторых шрифтах пишутся справа налево. В некоторых документах, в частности, в документах на арабском языке или на иврите и в некоторых смешанных языковых контекстах текст в одном (визуально отображаемом) блоке может выводиться в различных направлениях. Такая ситуация обозначается термином или более коротким термином «bidi» от английского «bidirectionality».

В стандарте Unicode ( [UNICODE] , раздел 3.11) описан сложный алгоритм для определения точного направления текста. Алгоритм состоит из неявной части, основывающейся на свойствах символов, и явной части, управляющей процессом вставки и переназначения. В спецификации CSS2 данный алгоритм используется для осуществления адекватного двунаправленного вывода текста. Свойства ‘direction’ и ‘unicode-bidi’ позволяют разработчикам указывать способы отображения множества элементов и атрибутов языка документа на множество понятий данного алгоритма.

Если документ содержит символы, выводимые справа налево, а агент пользователя отображает эти символы (с использованием соответствующих глифов, а не произвольных заменителей типа вопросительных знаков, шестнадцатеричных кодов, черных прямоугольников и т.д.), то агент должен использовать алгоритм двунаправленного вывода. Это кажущееся на первый взгляд односторонним требование отражает тот факт, что документы, использующие написание справа налево, чаще содержат текст, набранный в противоположном направлении (например, числа или текст на другом языке), чем те документы, в которых основным направлением написания является направление слева направо. Однако следует заметить, что не все документы на арабском языке или на иврите содержат разные направления текста.

Т.к. направление текста зависит от строения и семантики языка документа, данные свойства должны преимущественно использоваться создателями описаний типов документов (DTD) или разработчиками специальных документов. Если в основной таблице стилей указаны данные свойства, то разработчики и пользователи не должны вводить переназначающие их правила. Типичное исключение составляет свойство bidi, которое по запросу пользователя может быть переназначено и использовано агентом для транслитерации идиша (как правило, написанного буквами иврита) латинскими буквами.

В спецификации языка HTML 4.0 ([HTML40], раздел 8.2) определяется тип поведения элементов HTML при двунаправленном выводе текста. Конформные пользовательские агенты, управляющие выводом HTML-документов, могут игнорировать свойства ‘direction’ и ‘unicode-bidi’ в таблицах стилей разработчиков и пользователей. Правила таблицы стилей, управляющие двунаправленным выводом текста, определенным в описании [HTML40] , представлены в примере таблицы стилей. Спецификация языка HTML 4.0 включает и другую информацию об использовании разных направлений вывода текста.

‘direction’

Значение: ltr | rtl | inherit
Начальное значение: ltr
Область применения: все элементы, см. описание
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования

Данное свойство задает основное направление написания, используемое в блоках, направление вставок и переназначений (см. ‘unicode-bidi’ ) для алгоритма двунаправленного вывода, используемого в Unicode. Оно также задает направление вывода столбцов таблицы, направление горизонтального переполнения и положение неполной последней строки в блоке в случае, если используется выравнивание ‘text-align:justify’.

Значения данного свойства имеют следующий смысл:

ltr Направление слева направо. rtl Направление справа налево.

Чтобы свойство ‘direction’ могло влиять на элементы строкового уровня, свойству ‘unicode-bidi’ необходимо присвоить значение ’embed’ или ‘overr >

Примечание. Если свойство ‘direction’ применяется к элементам столбцов таблицы, то оно не наследуется ячейками столбца, т.к. столбцы не существуют в дереве документа. Поэтому в CSS не существует простого способа конструирования правил наследования атрибута «dir», описанных в разделе 11.3.2.1 [HTML40] .

‘unicode-bidi’

Значение: normal | embed | b >inherit
Начальное значение: normal
Область применения: все элементы, кроме see prose
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Значения данного свойства имеют следующий смысл:

normal Согласно алгоритму двунаправленного вывода элемент не создает нового дополнительного уровня вставки. Для элементов строкового уровня неявная перегруппировка выполняется только в пределах его границ. embed Если элемент является элементом строкового уровня, то данное значение разрешает создание дополнительного уровня вставки согласно алгоритму двунаправленного вывода. Направление данного уровня вставки задается свойством ‘direction’ . Внутри элемента перегруппировка выполняется неявно. Это соответствует добавлению LRE (U+202A; для ‘direction: ltr’) или RLE (U+202B; для ‘direction: rtl’) в начало элемента и PDF (U+202C) в конец элемента. bidi-override Если элемент является элементом строкового уровня или элементом уровня блока, который содержит только элементы строкового уровня, то данное значение создает переназначение. Это значит, что внутри элемента перегруппировка осуществляется в строгом порядке согласно свойству ‘direction’ , а неявная часть алгоритма двунаправленного вывода игнорируется. Это соответствует добавлению LRO (U+202D; для ‘direction: ltr’) или RLO (U+202E; для ‘direction: rtl’) в начало элемента и добавлению PDF (U+202C) в конец элемента.

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

Т.к. для алгоритма, используемого в Unicode, установлено ограничение в 15 уровней вставки, рекомендуется не использовать свойство ‘unicode-bidi’ со значением, отличным от ‘normal’, если в этом нет острой необходимости. В частности, значение свойства ‘inherit’ следует использовать очень осторожно. Тем не менее, для элементов, которые будут отображаться в виде блоков, рекомендуется указать ‘unicode-bidi: embed’, чтобы сохранить целостность элемента в том случае, если его вывод будет осуществляться по строкам (см. пример ниже).

В следующем примере показан XML-документ с двунаправленным выводом текста. Он иллюстрирует важный принцип: дизайнерам DTD следует учитывать свойство b >

В этом примере буквы нижнего и верхнего регистра обозначают символы, наследующие направление вывода слева направо и справа налево, соответственно:

Поскольу это XML, то за установление направления написания ответственна таблица стилей. Она приведена ниже:

Элемент HEBREW является блоком с направлением написания справа налево, элемент RUSSIAN — это блок с направлением написания слева направо. Элементы PAR — это блоки, которые наследуют основное направление написания у своих родительских элементов. Таким образом, первые два элемента PAR начинаются с верхней правой стороны, а последние три начинаются с верхней левой стороны. Помните, что названия элементов HEBREW и RUSSIAN выбраны только для примера; как правило, названия элементов должны отображать структуру, не ссылаясь на язык.

Элемент EMPH является элементом строкового уровня, и поскольку его свойство ‘unicode-bidi’ имеет значение ‘normal’ (начальное значение), то он не влияет на упорядочение текста. А элемент HE-QUO создает вставки.

Форматирование этого текста может иметь следующий вид при большой длине строки:

Помните, что в случае вставки HE-QUO элемент ИВРИТ18 будет расположен справа от элемента русский19.

Если необходимо разбить строки, рекомендуется сделать это следующим образом:

Т.к. элемент ИВРИТ18 должен читаться до элемента русский19, то он находится на одну строку выше него. Простое разбиение длинной строки при прежнем форматировании не дало бы результатов. Необходимо учесть, что первый слог элемента русский19 мог бы находиться на предыдущей строке, но разбивка по слогам слов, написанных слева направо, в контексте написания справа налево, и наоборот, обычно не используется во избежание появления дефиса в середине строки.

5 нетривиальных моментов разработки фронтэнда на CSS

Ребята из Noveo нашли статью о некоторых аспектах использования CSS, на которые при верстке следует обратить особое внимание. После перевода материал был отдан на вычитку штатной верстальщице Светлане. Светлана нашла в статье несколько спорных пунктов, добавила комментарии и предложила свои варианты решений — предлагаем вам почитать интересную полемику двух фронтенд-разработчиков!

Фронтэнд-разработчик WebiNerds Евгений Половный охотно делится знаниями и опытом с коллегами, организуя тренинги и воркшопы, а также с читателями ГитХаба, публикуя часть своих материалов в книге на GitHub. WebiNerds адаптировали части этой книги для настоящей статьи.

Введение

Многие разработчики считают, что сделали достаточно, если что-то «работает». Я думаю, сегодня это одна из самых больших проблем в нашей индустрии. На своем последнем воркшопе я попытался обратить внимание на некоторые нюансы фронтенд-разработки, указать на проблемы, которые мы часто встречаем, работая с CSS.

Возьмем, например, флексбокс, представленный в CSS3. К сожалению, многие программисты, работающие во фронт-энд-разработке, не изучают флексбокс — или, по крайней мере, не делают это тщательно. Очень важно понимать разницу между флексбоксом и float-макетом, не только в общем, но и на глубоком уровне. Разработчики вполне могут написать какой-то работающий код (т.е. на экране визуально все нормально работает), не понимая, что происходит за фасадом — а следовало бы.

У CSS много нюансов. Рассмотрим 5 интересных моментов этой технологии, включая flexbox и float, на которые стоит обратить особое внимание.

Свойство CSS Float

Свойство CSS float представляет собой значительное усложнение для разработчика: обтекаемые элементы не остаются в обычном потоке рендеринга. Другими словами, позиция обтекаемых элементов рассчитывается иначе — от позиции других, не обтекаемых элементов. По умолчанию поток для HTML-элементов линейный. Элементы размещаются на странице слева направо, и затем переходят на следующую строку, когда на текущей больше нет места. Элементы, к которым применяется float , выпадают из этого потока.

Здесь мы должны приостановиться и рассмотреть термин «поток рендеринга». Этот термин может сбивать с толку. Что он на самом деле значит? Когда веб-страница загружается, наш браузер сначала загружает структуру Document Object Model (DOM). Затем, прежде чем отрисовать страницу, браузер должен найти блоки в DOM, соответствующие свойствам CSS в CSS файле (или файлах). Поток описывает порядок операций для механизма визуализации браузера. По сути поток — это то, как браузер решает, где каждый элемент будет размещен перед рендерингом. Только после того, как браузер все это сделает, сайт будет визуально отражен на экране.

Направление потока с выровненными элементами.

Трудность с CSS Float

В тот момент, когда строится HTML-страничка, обтекаемые элементы не распознают другие элементы в DOM (Document Object Model), за исключением текстовых элементов, таких как

или
. Происходит это потому, что обтекаемые элементы «выравниваются» — вдобавок к основным элементам — по границе родительского элемента. Из-за этого элементы со свойством CSS float не всегда ведут себя одинаково во всех контекстах. В частности, обтекаемый элемент может неожиданно отреагировать, когда он расположен рядом с нетекстовыми элементами, такими как блочные (

) или строчно-блочные элементы ( ), или рядом с . Неожиданное поведение может возникать потому, что отображение обтекаемых элементов зависит от окружающих их объектов, и обтекаемые элементы «не видят» элементы нетекстовые .

Мы можем решить эту проблему, добавив элемент к DOM между других элементов:

Но как мы знаем, пустые и нефункциональные элементы в DOM – плохая практика.

Однако у этой проблемы есть простое решение. Мы можем добавить псевдо-класс, способствующий нормальному рендеринговому потоку. Когда этот псевдо-класс добавлен, элементы могут распознавать друг друга. Если кратко — псевдо-класс заставляет необтекаемые элементы реагировать на расположение обтекаемых элементов.

Есть и более элегантное решение. Мы просто добавляем отдельный класс для элементов, требующих очистки. Этот класс CSS устраняет необходимость нефункциональных элементов в DOM:

Светлана: Способов «зачистки» ( clearfix ) обтекаемых элементов было придумано довольно много, но как известно, чем меньше строчек, тем легче файл. Вот самый короткий вариант из всех существующих:


Этот способ зачистки будет работать во всех современных браузерах, поддерживающих псевдоэлементы (IE9+). Если требуется поддержка IE8, просто удалите одно двоеточие перед after. Подробное описание этого способа можно прочитать здесь: http://nicolasgallagher.com/micro-clearfix-hack/.

Свойство CSS Position

Свойство CSS position на самом деле довольно простое по сути. Однако нельзя забывать, что абсолютные и фиксированные элементы — как обтекаемые элементы — не участвуют в потоке рендеринга. При этом относительные и статично позиционированные элементы остаются в потоке рендеринга. По этой причине нам нужно крайне осознанно и внимательно использовать свойство position . Когда бы мы его ни использовали, мы должны понимать глубинный смысл того, что мы делаем.

Светлана: Автор безусловно прав в том, что относительно позиционированные элементы не влияют на основной поток. Однако здесь стоит внести ясность: в потоке резервируется место под элемент, как если бы к нему применялось свойство position: static . После этого элемент смещается на указанное расстояние (свойства top , bottom , left и right ). В своем новом месте обитания элемент уже не в потоке и может наслаиваться на другие элементы.

Похожую картину можно наблюдать при использовании CSS3 трансформаций, но это уже тема для отдельной статьи.

Распространенная ошибка при работе с position : попытка растянуть элемент с position: absolute до полной ширины страницы:

Это работает до тех пор, пока вы не попытаетесь прокрутить страницу вниз. Тогда вы понимаете, что ширина, высота и расположение рассчитаны не на основе размера документа, но на основе размера экрана. Этот объект с абсолютным позиционированием выпал из потока.

Сам поток по себе не вызывает проблем. Но нужно осознавать, что элементы с абсолютным и фиксированным позиционированием ускользают из потока рендеринга.

Светлана: Говоря про позиционирование элементов и их рендеринг относительно друг друга, очень важно упомянуть такой термин, как «контекст наложения» (stacking context). Это не самый простой термин из вокабуляра фронтендщика, но я попробую объяснить его на пальцах.

Контекст наложения тесно связан с понятием потока. Представьте себе нормальный поток рендеринга. Ко всем элементам применяется position: static (значение по умолчанию), никаких float’ов и других влияющих на поток свойств нет. В этом случае есть всего один контекст наложения, принадлежащий окну браузера. Именно по этой причине абсолютно позиционированный div в примере выше будет рассчитывать высоту и ширину от окна браузера, а не от тега html или body .

Теперь давайте создадим еще один контекст наложения. Свойств, которые за это отвечают, существует несколько: position (кроме static ), transform и даже opacity . Предлагаю использовать наиболее распространенный прием – добавим body свойство position: relative .

В результе создается новый контекст наложения относительно тега body . Т.е. теперь любой вложенный в body тег с position: absolute будет позиционироваться относительно body .

Очень важно переварить и усвоить эту идею. Этот прием частенько называют «позиционирование относительно родителя», и он бывает чрезвычайно полезен в ряде случаев, будь то центрирование или responsive-таблицы.

С другой стороны, незнание этого приема может сыграть с вами злую шутку. Представьте, что у вас уже есть страница со множеством различных блоков, большой вложенностью. Вы хотите наскоро добавить попап или модалку. По какой-то причине вы добавляете блок с попапом не в , а в какой-нибудь

Контекст наложения влияет на абсолютно позиционированные блоки. Блоки с фиксированным позиционированием всегда будут располагаться и рассчитывать свои значения в % (например, высоту) относительно окна браузера.

Еще хотелось бы внести ясность в то, что значат значения свойств top , bottom , left и right . Казалось бы, все просто: это значения, говорящие браузеру, где отобразить блок. Это так, но… Рассмотрим пример: есть блок со значением top: 100px . Если у него позиционирование relative , то это будет означать, что браузер отрисует его на 100px ниже его первоначального отображения. При этом помним, что место под его первоначальное отображение резервируется.

Теперь изменим позиционирование на абсолютное. Как уже знаем из примеров выше, новое положение будет рассчитываться от границ контекста наложения. Т.е. на 100px ниже верхней границы окна браузера, при этом его горизонтальное смещение может интерпретироваться по-разному разными браузерами. Чтобы создать кроссбраузерную картинку, лучше всегда задавать не только top или bottom , но еще и left или right .

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

Блоки с фиксированным позиционированием будут всегда смещаться на указанные величины в свойствах top , left и т.п. относительно окна браузера.

На блоки с позиционированием static значения свойств top , left и т.п. не влияют. Т.е. браузер их просто проигнорирует. Советую это запомнить, т.к. весьма удобно «сбрасывать позиционирование» в отдельных медиазапросах, используя position: static .

Свойство флексбокс (Flexible Boxes)

Флексбокс новее, чем свойства float и position . Он был разработан для того, чтобы предложить другой способ расположения элементов, и основан на другом образе мышления. Флексбокс предлагает больше возможностей позиционирования и возможностей определять отношения между элементами, чем свойства float и position — потому что флексбокс позволяет вам располагать элементы относительно друг друга. Это важно. С float и position элементы располагаются относительно страницы. С флексбоксом элементы соотносятся только между собой.

Это открывает перед нами много восхитительных возможностей. Например, мы можем поменять расположение элемента, меняя его порядковый номер только в CSS. Таким способом элементы легко подвинуть или поменять местами. Трудность с флексбоксом в том, чтобы понять, КАК и ПОЧЕМУ он работает именно таким образом. Это новая парадигма, которая, соответственно, требует нового образа мышления. Для начинающих разработчиков, только вступающих на этот путь, это может не быть такой уж большой проблемой. Но разработчикам-ветеранам нужно научиться думать так же, как флексбокс. В наши дни это обязательный скилл для всех разработчиков.

Светлана: Ключевое отличие стандартных сеток на флексах от сеток на float’ах (например, bootstrap) заключается в том, что для флексов нет необходимости создавать обертку ( > в bootstrap), группирующую колонки. При помощи свойства flex-wrap (которое, кстати, есть только в 2 из 3 синтаксисов флексбокса) колонки сетки могут переходить на «новую строку», если для них недостаточно места на текущей. При этом не требуется применять clearfix , а следовательно, отпадает необходимость в дополнительной разметке. Поскольку поддержка этой возможности все еще не достаточно хорошая (IE10+, Android 4.4+), нужно думать о полифиле. К сожалению, на момент написания этих строк универсального полифила для всех фич флексбокса еще не придумали. Существующие решения либо не готовы к продакшену по причине большого количества багов, либо работают хорошо, но требуют серьезной оптимизации (создают ощутимые задержки при отрисовке страницы). Но мы можем с уверенностью применять в качестве полифила сетку «на инлайн-блоках» ( display: inline-block ). Такая сетка тоже не требует дополнительной разметки, а колонки переходят на новую строку, если не помещаются на текущей.

Трудности флексбокса

В настоящее время самая большая трудность с флексбоксом заключается не в его способностях, а скорее связана с поддержкой браузеров. Старые браузеры просто не знают, что с ним делать. К счастью, понять, какие браузеры и версии браузеров поддерживают и не поддерживают Flexbox, на самом деле легко – просто проверьте на caniuse.com.

Из-за проблем с поддержкой браузеров (в старых версиях браузеров) возможность использовать флексбокс в проекте зависит от потребностей клиента. Если заказчик настаивает на поддержке старых браузеров, о флексбоксе не может быть и речи. Если же заказчик ориентируется на современные браузеры, я однозначно использую флексбокс.

Светлана: Этот момент, на мой взгляд, спорный. Можно полифилить большую часть случаев, для которых применяется флексбокс, даже для IE8+.

Также есть очень полезный SASS-миксин для обеспечения оптимальной кроссбраузерной поддержки:

Разные типы верстки: адаптивная vs отзывчивая

Отзывчивые макеты реагируют на размер окна браузера, в котором они открываются, и автоматически отвечают на изменение размера. Например, отзывчивый сайт будет реагировать, когда вы изменяете размер окна браузера на вашем рабочем столе или ноутбуке, потянув за угол окна.

Адаптивные макеты, в свою очередь, предлагают макеты сайта, полностью различные в зависимости от девайсов. Другими словами, мобильная версия сайта может содержать элементы (и даже функциональность), которые не представлены в десктопной версии. Версия сайта, которую посетители видят на планшетах, также может полностью отличаться как от мобильной, так и от десктопной версий. Даже для десктопа вы можете предложить HD-версии сайта или же версии низкого разрешения, в зависимости от экрана, на котором просматривается сайт.

Почти каждый современный вебсайт использует смесь адаптивной и отзывчивой верстки. Возьмите, например, TechCrunch:

Обратите внимание, как рубрика «Избранные новости» (Featured Stories) размещается справа от рубрики «Смотреть репортаж Crunch» («Watch Now Crunch Report»), когда окно на рабочем столе широкое, но затем перемещается вниз, когда окно сужается. Это «отзывчивая» верстка. Однако там происходит намного больше. Обратите внимание, как изменяется весь заголовок, когда окно уменьшается в размерах. В версии, оптимизированной для мобильных девайсов, у нас есть только меню «гамбургер», логотип TechCrunch и иконка космического корабля (при клике на которую разворачивается лист топ-историй):

В десктопной версии сайта у нас абсолютно другой заголовок:

Элементы не просто перераспределены, чтобы вместиться в подходящую для мобилок версию. То, что мы видим — два абсолютно разных макета, две абсолютно разные версии интерфейса.

Мы можем делать адаптивные макеты в CSS с помощью медиа-запросов:

Медиа-запросы позволяют нам уточнить критерии, определяющие, какую версию сайта отображать. В большинстве случаев эти критерии являются параметрами разрешения экрана. Иногда мы можем использовать DPI (Dots Per Inch, буквально – «Количество точек на дюйм», измеряющее плотность пикселей на экране) чтобы определить, какую версию показать. Дополнительно мы можем использовать медиа-запросы и попытаться определить, сенсорный девайс или нет. Для нацеливания на продукты Apple особенно полезен ресурс stephen.io, поддерживаемый Стефеном Гилбертом (Stephen Gilbert). Stephen.io перечисляет медиа-запросы к мобильным девайсам Apple, делая максимально простым определение конкретной модели iPhone или (еще лучше) ВСЕХ моделей iPad с помощью всего одного медиа-запроса:

Сложность с адаптивным дизайном

Сложность с адаптивным дизайном просто в том, что многие разработчики до сих пор не знают, как правильно с ним работать, потому что их никогда этому не учили. Для заказчика это означает, что вы должны убедиться в том, что разработчики в выбранной вами компании веб-разработки имеют опыт работы с адаптивной версткой. Это не какая-нибудь непонятная технология, а распространенный в отрасли тренд. Едва ли не каждый новый сайт использует адаптивный дизайн.

Светлана: Веб-технологии меняются стремительно: меняется стандарт, разработчики со всего мира придумывают различные приемы, улучшающие интерфейсы и упрощающие разработку. Далеко не все термины, которыми пользуются фронтендщики, можно найти в спецификациях. В связи с этим у новичков и даже у опытных разработчиков часто возникает вопрос «а чем отзывчивый макет отличается от адаптивного или резинового?». Сейчас я немного побуду занудой. Термины не просто так становятся общеупотребимыми. Их таковыми делают книги и статьи выдающихся разработчиков. Так вот, четкие различия между этими типами макетов можно посмотреть на liquidapsive.com. Примеры на этом сайте не противоречат тому, как Итан Маркотт (Ethan Marcotte) определяет отзывчивые макеты в своих книгах и статьях (послуживших основой современному тренду), или тому, какая идея была в основе первых адаптивных макетов в далеком 2006-м. Это полезно знать, однако термины невозможно заморозить. И сейчас, особенно среди русскоязычных разработчиков, «адаптивный» и «отзывчивый» стали почти синонимами.

Адаптивные CSS-фреймворки

Адаптивные CSS-фреймворки помогают разработчикам правильно ориентировать элементы, предлагая сетку с 12 колонками. Использование фреймворка сокращает время разработки сайта в целом.

Создание сетки с различными значениями ширины для различных размеров экрана во фреймворке Foundation.

Полноценные фреймворки, такие как Bootstrap и Foundation, представляют собой больше, чем просто систему сеток. Они также предоставляют JavaScript-плагины, правила CSS и элементы дизайна. В последнее время я работаю практически исключительно на Foundation. Не потому, что Bootstrap способен на меньшее, скорее потому, что Bootstrap предлагает так много опций для визуальной адаптации, что нам просто не нужно столько для наших проектов. За счет дополнительной функциональности Bootstrap шире. Bootstrap отличный, особенно если у вас в команде нет дизайнера и вы хотите использовать все встроенные элементы дизайна. Как бы то ни было, мне обычно просто нужны функциональные элементы CSS-фреймворка, а не элементы дизайна.

Светлана: Bootstrap также предлагает простецкий интерфейс, чтоб вырезать ненужные части фреймворка.

Хотя существуют и другие фреймворки, Bootstrap и Foundation могут удовлетворить практически 100% потребностей разработки. И, к счастью, довольно просто выучить оба этих фреймворка. Оба хорошо задокументированы и имеют большое сообщество активных пользователей, которые могут помочь и ответить на вопросы.

За CSS-фреймворками — будущее. Если вы пока не используете какой-нибудь из них, стоит серьезно задуматься над тем, чтобы приобщиться!

Выводы

Сейчас — увлекательное время для CSS и фронтенд-разработки. Благодаря (относительно) новым инструментам, таким как свойство флексбокс, и CSS-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

Фиксированное позиционирование

Доброго времени! Есть элемент, спозиционированный фиксированно:

Он изначально не присутствует на странице, а подгружается динамически (по клику) и помещается внутрь блока «parent». Среди его родителей есть один с относительным позиционированием:

На элемент изначально навешен класс hidden (в таком виде он уже приходит).

После подгрузки элемент должен отобразиться на странице, занимая, соответственно всю область браузера. Его обрабатывает вот такой скрипт:

Класс shown только устанавливает display:block.

Проблема в том, что ширина и высота элемента почему-то отсчитываются не от области окна браузера (чего я, честно говоря, ожидала при фиксированном позиционировании, а от того самого элемента wrapper, у которого относительное позиционирование. Из-за этого в момент расчетов высота элемента равна высоте всего документа и соответственно, маргины рассчитываются неправильно, элемент оказывается слишком высоко. После того, как убирается класс hidden, высота становится равной высоте окна браузера, как и должно быть. Элемент исчезает за верхней границей экрана.

Почему фиксированно позиционированный элемент (даже невидимый, даже неподгруженный), рассчитывает свои размеры относительно другого элемента, а не относительно экрана? Или это нормальное поведение и мне нужно менять всю верстку?

Временный костыль, который позволяет правильно отображать элемент:

АПД: Добавила элементу display: block, ничего не меняется. У body и html указана height:100%.

АПД: Видимо, проблема не в самом относительно позиционированном элементе, а в том, что если фиксированный блок имеет display: none, скрипт возвращает не его настоящую высоту, а высоту ближайшего позиционированного элемента. Можно ли как-то получить настоящую высоту скрытого фиксированного блока?

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 12. Позиционирование блоков

Позиционирование блоков

Элемент в html — это прямоугольник; схемы позиционирования определяют где должен располагаться этот прямоугольник, а также как он должен влиять на элементы вокруг себя.

Рассмотрим два элемента, служащих для стилизации:

    Тег div — это блочный элемент, который может содержащать другие блоки, такие как, например, изображения и таблицы.

Пример:

Пример:

Текст продолжение текста

Статическое позиционирование

Статическое позиционирование — это позиционирование элемента по умолчанию. Такой элемент занимает на веб-странице место соответственно своему положению в html-коде, т.е. определенное в нормальном потоке.

На статически позиционированный элемент не действуют свойства top , bottom , left и right .

Пример:

Фиксированное позиционирование CSS

  • Фиксированно позиционированный элемент удаляется из потока HTML и позиционируется относительно окна браузера. Элемент как будто «плавает» над другими тегами страницы.
  • Он остается на месте при прокрутке страницы.
  • При фиксированном позиционировании необходимо задать координаты расположения элемента.

Установка координат:

Значения:
auto | величина | %

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Относительное позиционирование CSS

  • Относительное позиционирование располагает элемент относительно его нормального положения.
  • При относительном позиционировании обязательна установка координат расположения элемента относительно его нормального положения.

Установка координат:

Значения:
auto | величина | %

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

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

  • Абсолютная позиция отсчитывается от ближайшего к элементу родительского контейнера, который имеет позиционирование absolute , relative или fixed (кроме static ). Если такой родительский элемент отсутствует, то им считается окно браузера.
  • При абсолютном позиционировании обязательна установка координат расположения элемента относительно его родителя (см. пред. пункт).

Установка координат:

Значения:
auto | величина | %

Пример:

Результат:

Пример взаимодействия с родительским блоком:

Результат:

Результат:

Перекрытие слоев в CSS

Блоки с абсолютным позиционированием могут быть расположены на разных уровнях, которые определяются свойством z-index.

Значения:

  • auto «нулевой уровень», задаваемый по умолчанию;
  • отрицательное число — объект располагается «ниже» нулевого уровня (удаляется вглубь, под элементы);
  • положительное число — объект располагается «выше» нулевого уровня.

Пример:

Параграф нормального потока

Результат:

Используйте следующие свойства CSS:

  • position :
  • z-index :
  • top :
  • left :
  • opacity :0.5; /* прозрачность */
  • filter : Alpha ( Opacity =50); /* прозрачность для IE */

Требуемый результат:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL