Можно ли задавать отрицательные значения для параметров left right top bottom
С мещение элементов в CSS
С войства BOTTOM, LEFT, RIGHT, TOP
Эти свойства определяют смещение между внешним краем позиционированного элемента и краем его родительского элемента: Top — от верхнего края, Bottom — от нижнего, Left и Right — от левого и правого. Если родитель у элемента отсутствует, то началом отсчёта служат границы окошка браузеров.
Область применения *: позиционированные элементы, для которых значение свойства Position отлично от static.
.element < position: absolute; top: 50px; right: 50px; height: 70px; width: 70px; border: 2px solid #000;>
.element < position: absolute; top: 50%; right: 50%; height: 70px; width: 70px; border: 2px solid #000;>
— в первом примере смещение задано в пикселах;
— во втором — в процентах, где высота элемента ровно в два раза меньше высоты родителя, выступ произошёл из-за ширины рамки, а в принципе можно чётко поместить элемент в один из углов родительского блока:
Смещение элементов при абсолютном и относительном
позиционировании
В зависимости от значения свойства Position смещение элемента может быть неодинаково. При абсолютном позиционировании он смещается относительно границ родительского элемента, при относительном позиционировании, смещение происходит относительно нормального потока на заданные величины.
.element < position: absolute; bottom: 30px; left: 30px; height: 70px; width: 70px; border: 2px solid #000;>
— для элемента задано абсолютное позиционирование; в примере на второй картинке — всё то же самое, только позиционирование относительное, т.е. свойство Position со значением relative:
Используются принятые в CSS единицы, отрицательные значения смещают элемент наружу. Для относительно позиционированных элементов значение свойства Left всегда равно значению свойства Right, но с противоположным знаком. Для элементов static значение всегда будет auto, т.е. ноль.
• % — относительно высоты или ширины родительского элемента.
• auto — если Bottom и Top имеют значение auto — то это для обоих будет 0; если одно из них auto — то оно принимает значение другого, но с противоположным знаком; если значение Top задано — то значение Bottom будет auto, т.е. ноль. Значения тестировались в браузере Сhrome.
• inherit — наследование от родительского элемента.
Позиционирование элементов
Нормальное позиционирование
Абсолютное позиционирование
Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании
Для режима характерны следующие особенности.
Пример 3.31. Создание аналога фреймов
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.
Рис. 3.43. Применение абсолютного позиционирования
Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title тега который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.
Пример 3.32. Стиль для всплывающей подсказки
Сам скрипт состоит из двух функций — moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).
Пример 3.33. Скрипт для вывода слоя
Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега
‘ + ‘Объектив: Canon EF 24-105 f/4L IS USM
‘ + ‘Вспышка: Canon Speedlite 580 EX
‘ + ‘Выдержка: 1/125
Диафрагма: 5.6′)” onmouseout=”toolTip()” />
Позиционирование HTML элементов в CSS при помощи свойства position (absolute, relative, fixed, static)
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Настало время дополнить «Учебник CSS» новыми полезными материалами и сегодня мы познакомимся с тем, каким образом можно разнообразить размещение различных элементов на странице, применив для них свойство позиционирования position с различными параметрами (static, relative, absolute, fixed).
Также в рамках озвученной выше темы рассмотрим, как можно задавать тот или иной отступ вправо, влево, вверх или вниз посредством использования соответствующих свойств left, right, top и bottom путем присвоения им нужных числовых значений.
Напомню, что любую вебстраницу мы можем рассматривать как упорядоченный набор HTML тегов в структуре документа. Они определяют вид того или иного элемента, а вот их расположение диктует набор правил каскадных таблиц стилей, которые в итоге создают законченную картину.
Определение позиции элемента и нормальное позиционирование (position static)
Для свойства position существует четыре значения (static | relative | absolute | fixed), которые и определяют способ позиционирования. Как вы, наверное, знаете, параметры практически всех CSS правил можно почерпнуть с официальной странички спецификации W3, где представлен полный набор свойств и их значений, в том числе position:
Позиционированием именуют расположение элемента в системе координат. На основании значений свойства position можно различить четыре типа позиционирования: нормальное, абсолютное, относительное и фиксированное.
При помощи position и упомянутых мною выше left, right, top, bottom (отступы соответственно влево, вправо, вверх, вниз) можно регулировать положение элементов один относительно другого, фиксировать их в определенном месте или даже производить наложение одного элемента на другой.
Более того, позиционированием можно управлять посредством скриптов. Это дает возможность придать любому элементу динамику, а также создать анимационные и другие эффекты.
В том случае, если position отсутствует или оно имеет значение static, элемент отображается в обычном порядке как составная часть HTML потока. То есть все составные части вебстраницы выводятся в той последовательности, которая присутствует в исходном коде страницы.
Резюмируя, отмечу, что значения, отличные от static, позволяют изменить стандартное расположение вебэлементов страницы, что очень важно в свете решения нетривиальных задач при верстке. Кстати, другим средством, которое способно поменять обычный порядок, является свойство CSS float, с помощью которого можно создать плавающие элементы.
Position absolute (абсолютное позиционирование)
Итак, продолжим разбор технических нюансов абсолютным позиционированием, которое определяется параметром absolute свойства position:
Важно понимать, что в данном случае элемент не будет отображаться в стандартном потоке. Соответственно у нас появляется возможность определить его местоположение в абсолютной системе координат, задав отступы от краев окна браузера посредством left, right, top, bottom:
В отличие от связанных стилей, являющихся на практике наиболее оптимальными, этот метод предусматривает размещение правил CSS не в отдельном файлике, а в виде значений атрибута STYLE, приписываемых нужному тегу. При этом для чистоты эксперимента пока position absolute добавлять не будем:
Чуть выше я уже сказал, что отсутствие position по умолчанию равнозначно тому, что для этого свойства указан параметр static. То есть отображение всех элементов происходит в обычной последовательности. Соответственно в нашем случае контейнеры будут располагаться по порядку (в стандартном HTML потоке):
Напомню, что для упорядочения и оптимизации каскадных таблиц стилей в CSS существует правило наследования дочерними элементами свойств родителей. Поэтому в данном случае блочные теги занимают позицию с нулевым отступом и в пределах родительского элемента.
Далее добавляем position absolute к списку стилей верхнего элемента. В результате получаем такую картину, которая наглядно показывает, как работает это правило:
Что же произошло? После применения абсолютного позиционирования к определенному элементу все остальные блоки вебстраницы перестают его “замечать” и ведут себя так, словно его нет. Причем мы пока не указали величины смещения с помощью left, right, top и(или) bottom.
А в этом случае после применения к нему параметра absolute вебэлемент остается на месте, в то время как его сосед (в нашем примере нижний подкрашенный блок) перемещается вверх. В результате осуществляется наложение одного элемента на другой. Попробуем теперь указать отступ слева для абсолютно позиционированного вебэлемента left:0, в результате получаем вот что:
Итак, если указать в качестве отступа нулевое значение, то вебэлемент с параметром позиционирования absolute выйдет за пределы родителя и прилипнет к краю окна браузера. В зависимости от заданного свойства (left, right, top, bottom) это будет левый, правый, верхний или нижний предел.
Причем необходимо отметить, что left имеет преимущество перед right, а top перед bottom. Если они входят в конфликт друг с другом, то значения соответственно right и bottom игнорируются. Идем далее. Следующим шагом пропишем положительное значение для left верхнего контейнера:
В этом случае произойдет смещение вправо от левого края области просмотра, которая определяется тегом HTML документа. Давайте систематизируем и отметим по пунктам некоторые особенности поведения вебэлемента при присвоении ему position absolute:
Думаю, я все разложил по полочкам что касается абсолютного позиционирования и вы можете сами определить, какое практическое применение может быть у элементов с таким свойством. Впрочем, в виде информации скажу, что при помощи свойства position со значением absolute можно создать блоки с фреймами, добавив правило overflow с параметром auto. Также существует возможность получить всплывающие подсказки для фото или изображений.
Position relative (относительное позиционирование)
Для примера, который поможет наглядно продемонстрировать действие данной разновидности свойства position, возьмем два контейнера, один из которых с помощью свойства float:left загоним влево, а текстовое содержание второго контейнера будет обтекать этот блок. Для наглядности придадим фон этим элементам, размеры с помощью width и height, а также необходимые отступы посредством свойства margin:
Выглядеть это будет так:
Теперь добавляем к правилу CSS для первого блока position relative, а также смещения вправо (left) и вниз (top) для того, чтобы относительное позиционирование дало результат:
В итоге результирующий вид будет таким:
Как видите, произошло смещение блока по заданным параметрам. Однако, соседний элемент не отреагировал на это и текст по-прежнему обтекает перемещенный контейнер как если бы тот оставался на своем прежнем месте.
С помощью предоставленного примера, думаю, понятно как работает относительное позиционирование, однако практическое применение в чистом виде ему найти сложно. Гораздо более востребован с этой точки зрения вариант взаимодействия параметров absolute и relative, который мы и разберем ниже.
Совместное использование position absolute и relative
Теперь рассмотрим, какой результат может дать использование в связке двух видов позиционирования. Ежели родительскому элементу присвоить значение relative, а дочернему absolute, то осуществится замена системы координат и местоположение дочернего вэбэлемента будет определяться относительно его родителя:
В качестве примера практического использования данного сочетания двух видов позиционирования приведу, пожалуй свой блог, где я недавно реализовал наложение заголовка и описания на изображение шапки. Первоначально картинка выглядела так:
Для реализации задачи я поступил следующим образом. Вначале прописал в STYLE.CSS своей темы relative для свойства position классу «site-header» родительского тега HEADER:
Также для корректного вывода мне пришлось определить ширину блока с классом «site-description», указав значение width:
Затем для класса «site-branding» дочернего контейнера DIV я указал абсолютное позиционирование и прописал отступы left и top, которые будут определять местоположение элемента в этом случае не в абсолютном исчислении (применительно к окну браузера), а относительно расположения родителя.
Также необходимо было удалить из набора правил CSS для этого тега свойство «text-align:center», чтобы выровнять текст заголовка и дескрипшн по левому краю. В результате такого взаимодействия относительного и абсолютного позиционирования задача была решена и нужный текст в виде заголовка и описания блога был наложен на изображение шапки:
Кроме предложенного мной примера с помощью связки relative absolute можно реализовать в общем случае такие задачи, которые предполагают появление и исчезание определенных вебэлементов. Причем в этом случае они не будут препятствовать правильному отображению остальных составных частей вебстраницы.
Частным случаем может стать, например, создание выпадающего меню на сайте. Это работает следующим образом. Если подвести курсор мышки к заглавному пункту меню, то появляется абсолютно позиционированный блок, сделанный на базе стандартных HTML списков. Его появление обеспечивает то обстоятельство, что соответствующему тегу назначен параметр relative свойства position.
Фиксированное позиционирование position fixed
Ну и последний параметр свойства position помогает фиксировать нужные вебэлементы на странице. В принципе этот вид позиционирования очень похож на абсолютное с той лишь разницей, что элемент с прописанным значением fixed привязан к определенной области на экране в окне браузера посредством left, right, top, bottom. Он остается на месте даже при прокрутке страницы.
Очень показательным примером может оказаться материал о создании плавающего меню на сайте с помощью position fixed, об этом можете почитать, перейдя на страницу по предоставленной ссылке. Рекомендую ознакомиться с этим материалом, даже если вы не планируете реализовывать подобную панель навигации на своем вебресурсе, поскольку данный пример очень показателен и помогает понять суть фиксированного позиционирования.
Кроме реализации плавающего меню position fixed используется при создании различного вида заголовков, вкладок, изображений. Одним словом, для закрепления тех блоков на вебстранице, которые наиболее важны с точки зрения улучшения поведенческих характеристик пользователей, повышения конверсии коммерческого проекта и т.д.
Публикация подошла к своему логическому завершению. В следующей статье я планирую коснуться нюансов использования свойства z-index, значения которого влияют на расположение позиционированных блоков на вебстранице. По сути, это будет продолжение сегодняшнего материала. В завершение хочу напомнить, что вы можете отметить старания автора нажатием на социальные кнопки чуть ниже, ну и высказать свое отношение о пользе предложенной информации в комментариях.
Отрицательные поля в CSS
Дата публикации: 2020-03-19
От автора: я пишу в новой книге главу «Блочная модель» и подошел к тому моменту, когда мне пришлось рассматривать отрицательные поля. К моему удивлению, я обнаружил, что нигде нет систематизированного описания отрицательных полей. Поэтому я должен был понять это для себя. Ниже мой первоначальный проект раздела «Отрицательные поля».
Последняя спецификация говорит только: «Отрицательные значения для свойств margin допускаются, но могут быть ограничения в конкретных реализациях». И на этом все. Не очень полезно. MDN также в основном молчит.
Это странно, особенно если учесть, что отрицательные поля — это очень старый функционал, который я, возможно, даже использовал в своем самом первом тесте CSS где-то в далеком 1998 году. (Если это был не position: relative, я уже не помню).
Но, во всяком случае, здесь, по-видимому, впервые в мире систематически рассматриваются отрицательные поля в простых ситуациях.
Отрицательные поля в CSS
Можно задать для поля отрицательное значение. Это позволяет вам отобразить элемент ближе к его верхнему или левому соседу или вывести его правого и нижнего соседа ближе к нему. Кроме того, есть исключение, к которому мы придем через минуту.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вот наш тестовый элемент: простой контейнер с тремя абзацами. Обратите внимание, что абзацы имеют ширину 250 пикселей. Это очень важно.
Поэтому второй абзац, являющийся нижним соседом первого, на 15 пикселей ближе к первому абзацу. Граница между вторым и третьим абзацами остается неизменной; браузер рассчитывает ее нормально. Таким образом, остальная часть вертикального распределения сохраняется.
Этот трюк полезен для тонких настроек, когда содержимое одного элемента должно слегка перекрывать содержимое другого над ним.
Сворачивание полей
Также обратите внимание, что при использовании отрицательных полей происходит сворачивание полей. Это, по крайней мере, указано в CSS 2.1:
В случае отрицательных полей максимальное абсолютное значение отрицательного соседнего поля вычитается из максимального положительного значения соседнего поля. Если положительных полей нет, то максимальное абсолютное значение отрицательного соседнего поля вычитается из нуля.
В последнем примере первый абзац по-прежнему имеет поле по умолчанию 1em (Chrome; не могу найти значение Firefox).
Обычно браузер берет margin-bottom первого абзаца и margin-top второго, определяет, какое из них больше, и применяет это поле между этими двумя абзацами, что дает max(-15px,1em) = 1em. Хотя это не так.
В случае отрицательных полей мы берем абсолютные значения двух смежных полей (15 пикселей для второго абзаца; 1em для первого) и вычитаем меньшее (15 пикселей) из большего (1em). Это дает около 1px (в зависимости от размера шрифта, конечно).
Таким образом, отрицательные поля на самом деле позволяют приближать элементы к своим соседям, не препятствуя обычному сворачиванию полей.
Как видите, первый абзац теперь смещен на 10 пикселей влево, сохраняя при этом свою ширину. Таким образом, его правый край также перемещается на 10 пикселей влево.
Второй абзац с отрицательным краем справа остался без изменений. Отрицательное margin-right будет влиять на любой элемент справа от второго абзаца, но их нет.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Чтобы проиллюстрировать, как работает margin-right, давайте сместим абзацы, чтобы у них был сосед справа.
Теперь мы собираемся задать в абзацах некоторые отрицательные поля.
Как видите, второй абзац теперь выводится на 10 пикселей ближе к первому из-за отрицательного правого поля первого абзаца.
Также обратите внимание, что второй абзац имеет отрицательное значение margin-right, что означает, что он смещен на 10 пикселей вверх. Третий абзац имеет отрицательное значение margin-bottom, которое не дает никакого эффекта, поскольку у него нет нижнего соседа.
Помните: сворачивание не работает для горизонтальных полей; только сверху и снизу. Поэтому нам не нужно беспокоиться об этом в данном случае.
Пока что отрицательные поля слева и справа ведут себя точно так же, как поля сверху и снизу.
width: auto и отрицательное margin-right
Теперь давайте изменим поведение отрицательного margin-right, задав для абзацев width: auto. У них больше нет фиксированной ширины; вместо этого они полностью заполняют родительский элемент в соответствии с его отступами. Так работает width: auto.
Отрицательное значение сейчас делает то же самое. Оно смещает правое поле абзаца на 10 пикселей вправо, а его левый край остается на своем месте, в результате чего ширина абзаца увеличивается. Это происходит только тогда, когда для элемента задано width: auto. Как мы видели ранее, элементы с фиксированной шириной ведут себя совершенно иначе.
Наконец, для третьего абзаца заданы оба горизонтальных поля. Его левое и правое поля смещены на 10px, по существу сводя на нет отступы контейнера в 10px.
На сегодняшний день это наиболее распространенный вариант использования отрицательных полей. Вы задаете для контейнера отступ, чтобы его содержимое располагалось через интервал от границы контейнера. Однако вы хотите, чтобы заголовок охватывал весь контейнер, игнорируя отступ. Отрицательные поля — это способ достичь этого.
Это стили заголовка; контейнер имеет отступы: 10px
Свойства top, left, bottom, right
С помощью данных свойств вы можете задавать расстояние между позиционированным элементом и:
Совершенно не обязательно задавать значения сразу для четырех сторон: используйте лишь те свойства, которые необходимы для перемещения элемента в нужном направлении.
В качестве значений принимаются любые единицы измерения длины в CSS. Например, вы можете установить расстояние между позиционированным элементом и сторонами браузера в размере 5% от левого края окна браузера и 40px от верхнего края окна браузера. Если расстояние задано в процентах, оно вычисляется, исходя из ширины/высоты родительского элемента. Также принимаются и отрицательные значения.
Помимо этого, можно установить значение auto (к слову, оно задано по умолчанию) и тем самым перезаписать предыдущие настройки. Обратите внимание, что значения 0 и auto не равны между собой и действуют по-разному.
Кратко рассмотрим каждое свойство:
Взгляните на серию примеров ниже, чтобы лучше понять, как ведет себя позиционированный элемент, когда к нему применяются вышеописанные свойства с различными значениями:
Рекомендуем дополнительно попрактиковаться в использовании свойств позиционирования и понаблюдать за изменениями в браузере: это именно тот случай, когда лучше один раз увидеть, чем сто раз услышать.
Далее в учебнике: свойство z-index — расположение позиционированных элементов по оси Z.