Позиционирование элементов
Нормальное позиционирование
Абсолютное позиционирование
Рис. 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()»/>
Новые логические свойства в CSS!
Следующий шаг в эволюции CSS
Интро
Большинство из нас, разработчиков, мыслят терминами право-лево и верх-низ. Всё потому что изначально интернет предназначался, главным образом, для загрузки документов, а не для сайтов со сложной структурой, которые мы создаём сегодня. Потому что никто в тот момент не учитывал потребностей многоязычных сайтов.
До недавнего времени переменные в Sass были лучшим способом поддержки сайтов с языками, текст которых пишется в разные стороны (RTL и LTR). Если вы хотите узнать больше, то почитайте мою статью «The Best Way to RTL Websites with Sass!»
Новые логические свойства дают нам гораздо больше возможностей управлять нашими сайтами, независимо от того, на каком они языке (английский, арабский, японский или другие), с минимальными изменениями стилей.
Самое время начать!
Мыслить логическими CSS-свойствами
Мы привыкли видеть что-то подобное, когда обсуждаем блочную модель:
Строчная ось
Например, padding-inline-start задаст отступ с той стороны, где начинается контент на текущем языке:
Блочная ось
Возможно, вы всё ещё спрашиваете себя, а разве это не всегда так?!
Ответ чуточку сложнее. В настоящее время все сайты на любых языках работают именно таким образом. Просто потому что до сих пор не было других доступных методов.
Сайты на японском и некоторых других восточных языках идут справа налево, а не сверху вниз! Чтобы понять, каково это, представьте, что вы повернули экран на 90° вправо. Сайт приходится листать не по вертикали, а по горизонтали!
Пример блочных свойства:
Новые свойства блочной модели
После того, как вы разобрались со строчной и блочной осями, вы можете использовать их по прямому назначению.
Пример для английского:
margin
padding
border
Логическая величина
width и height заменяются на inline-size и block-size
Пример строчного и блочного размеров:
Для английского и арабского (LTR и RTL)
В языках, идущих сверху вниз, например, японском, мы столкнёмся с противоположным:
Для минимальных и максимальных свойств просто добавьте min или max в начале. К примеру:
Позиционирование в CSS
Для английского (LTR):
Обтекание в CSS
Для английского (LTR):
Text-align
Для английского (LTR):
Свойство resize используется в основном для
Для английского (LTR):
У свойства background-position пока нет реализации ни в одном из браузеров, но если копнуть поглубже, то можно найти отсылки к background-position-inline и background-position-block на MDN. Ещё нет нормальной документации, но они работают над этим! 🙂
Прочее: уже сейчас можно предположить, что свойства типа transform-origin тоже будут обновлены, как и любые другие свойства, имеющие отношение к направлению.
Гриды и флексбоксы
Хорошая новость в том, что гриды и флексбоксы уже построены на новых логических свойствах и нет нужды их обновлять.
Рабочий процесс с учётом логических свойств
На первый взгляд это выглядит очень сложно. Но в работе всё просто. При написании стилей не нужно беспокоиться о поддержке нескольких языков. Вы просто используете логические свойства взамен старых физических свойств.
Применение выравнивания в зависимости от языка
После того, как мы рассмотрели все обновлённые логические свойства, вот вам ещё два, которые позволят определить выравнивание блочной оси (поток сайта) и выравнивание строчной оси (направление чтения текста).
Свойство writing-mode (блочная ось)
Определились с потоком сайта. В большинстве случаев он будет идти сверху вниз, но, как уже упоминалось, для некоторых языков он может идти справа налево (японский) или даже слева направо (монгольский). В обоих случаях у нас будет горизонтальная прокрутка, а не вертикальная, как мы привыкли.
Чтобы избежать этой путаницы, я рекомендую игнорировать часть значения со строчной осью и обращать внимание только на часть значения для блочной оси.
Примеры
Пример для японского:
Свойство direction (строчная ось)
Пример направления для арабского:
Даже удивительно, на сколько просто сайт, идущий сверху вниз, можно преобразовать в идущий справа налево с горизонтальной прокруткой.
Я сделал небольшое демо. Его лучше смотреть в Firefox, в текущий момент именно в нём поддерживается наибольшее количество свойств.
Демо (попробуйте поменять язык):
Браузерная поддержка
Проблемы с логическими свойствами
Этот вопрос всё ещё открыт. Я внёс предложение, которое может решить эту проблему. Если у вас есть решение получше, то вы можете оставить комментарий в этой ветке!
В данный момент, если вы хотите использовать логические единицы, вам следует отказаться от шорткатов в пользу полных названий свойств.
Предложенное мною решение:
Проблемы с адаптивным дизайном
Изменения, которые нужно учесть
Во время написания этого поста, уже после глубокого изучения и понимания концепции логических свойств, я заметил несколько упущенных моментов, которые следует поправить в будущем:
Но кто знает, может этот пост попадётся на глаза правильным людям из W3C 🙂
Резюмируя
Вот и всё. Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое. Я буду признателен, если вы поаплодируете или поделитесь этим постом 🙂
Больше постов по типографике
Другие мои посты о CSS
Кто я?
Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.
Вы можете найти меня в группах на Facebook:
margin-left
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-left |
Версии CSS
Описание
Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от левого края элемента
Синтаксис
margin-left: значение | auto | inherit
Значения
Величину левого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin-left
Объектная модель
[window.]document.getElementById(» elementID «).style.marginLeft
Браузеры
Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.
CSS left Property
Example
Set the left edge of a positioned
More «Try it Yourself» examples below.
Definition and Usage
The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS2 |
| JavaScript syntax: | object.style.left=»100px» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
| Value | Description | Play it |
|---|---|---|
| auto | Lets the browser calculate the left edge position. This is default | Play it » |
| length | Sets the left edge position in px, cm, etc. Negative values are allowed. Read about length units | Play it » |
| % | Sets the left edge position in % of containing element. Negative values are allowed | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Use the left property with a negative value and for an element with no positioned ancestors:
div.c <
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
>
С мещение элементов в 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 — наследование от родительского элемента.
