Absolute css: Понимание CSS z-index — CSS

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

Важно отметить, что все еще существуют значительные различия между относительными и абсолютными единицами измерения

Относительные единицы включают такие единицы, как % , em , rem , единицы области просмотра ( vw и vh ) и другие. Наиболее распространенной абсолютной единицей измерения является пиксель ( пикс. ). Кроме того, у нас есть сантиметр ( см ) и дюйм ( в ).

Теперь давайте рассмотрим, почему абсолютные единицы CSS не такие абсолютные.

Пиксели CSS

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

В 2007 году, например, наиболее распространенным разрешением рабочего стола было 1024 × 768 пикселей. В то время мы обычно давали нашим веб-страницам фиксированную ширину 1000 пикселей, чтобы уместить всю страницу, а оставшиеся пиксели сохранялись для полосы прокрутки браузера.

Экраны смартфонов

Смартфоны принесли еще одну тихую эволюцию, начав эру экранов высокой плотности. Если мы рассмотрим iPhone 12 Pro, у которого экран 1170 пикселей в ширину, мы будем считать каждые 3 пикселя на устройстве как 1 пикселя в CSS.

Когда мы измеряем размер в мобильных устройствах, мы измеряем его в соответствии с пикселями CSS, а не пикселями устройства. Подводя итог:

• пикселей CSS — это логических пикселей .
• Пиксели устройства являются реальными физическими пикселями .

Хорошо, а как насчет настольных устройств? Они все еще работают с тем же старым вычислением пикселей? Давайте поговорим об этом.

Экраны для настольных ПК В 2021 году

Экраны высокой плотности появились в ноутбуках несколько лет спустя. MacBook 2014 года получил первые экраны «retina» (retina является синонимом высокой плотности).

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

Рассмотрим MacBook :

• Экран 13,3-дюймового MacBook Pro имеет ширину 2560 пикселей, но ведет себя как 1440 пикселей. Это означает, что каждые 1,778 физических пикселя действуют как 1 логических пикселя.
• Экран 16-дюймового MacBook Pro имеет ширину 3072 пикселей, но ведет себя как 1792 пикселей. Это означает, что каждые 1,714 физических пикселя действуют как 1 логических пикселя.

Среди ноутбуков ПК я протестировал два 15,6-дюймовых экрана, один с разрешением Full HD, а другой с разрешением 4K. Результаты были интересными:

• Экран с диагональю 15,6 дюйма и разрешением Full HD имеет ширину 1920 пикселей, но ведет себя как 1536 пикселей. Это означает, что каждые 1,25 физических пикселя действуют как 1 логических пикселя.
• Экран 15,6-дюймовый 4K имеет ширину 3840 пикселей, но ведет себя, опять же, как 1536 пикселей. Это означает, что каждые 2,5 физических пикселя действуют как 1 логических пикселя.

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

С годами экраны стали плотнее

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

Рекомендуемое чтение : Что на самом деле означает складная паутина?

Почему мы рассчитываем логические пиксели по-разному?

Задумайтесь об этом на мгновение. Рассмотрим Samsung Galaxy S21 Ultra . Его более узкий размер составляет 1440 физических пикселей. Мы могли бы легко разместить его на обычном экране рабочего стола. Но если бы мы это сделали, текст был бы настолько мелким, что его невозможно было бы прочитать. Из-за этого мы отделяем физические пиксели от логических пикселей.

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

ОК, пиксели CSS не равны физическим пикселям устройства. Но у нас есть сантиметры и дюймы. Это физические единицы, связанные с физическим миром, верно? Давайте проверим их.

Больше после прыжка! Продолжить чтение ниже ↓

CSS-дюймы и CSS-сантиметры

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

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

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

Сантиметр CSS не равен физическому сантиметру.

Вот тестирую единицу сантиметра CSS с рулеткой на 13-дюймовом MacBook середины 2019 года:

Результат тот же для дюймов CSS:

Дюйм CSS не равен физическому дюйму.

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

Почему дюймы и сантиметры CSS не являются реальными дюймами и сантиметрами

С 1980-х годов на рынке ПК дюйм CSS определяется как эквивалент 96 пикселей. Этот расчет пикселей был напрямую связан со стандартом DPI/PPI (пикселей на дюйм) операционной системы Microsoft Windows для мониторов того времени, наиболее распространенный из которых имел стандарт 9.0021 96 точек на дюйм.

Это означало, что 1 дюйма CSS всегда будут эквивалентны 96 пикселям CSS.

Что касается сантиметров CSS, то каждый сантиметр рассчитывается непосредственно из дюймов, а это означает, что 1 дюйма эквивалентно 2,54 сантиметра. Это означает, что каждые 1 сантиметра CSS всегда будут равны 37,7952756 пикселей CSS.

Другими словами: 1 см = 37,7952756 пикселей (96 пикселей / 2,54) .

См. Pen [Реальные размеры CSS!] (https://codepen.io/smashingmag/pen/BaRJvWj) Элада Шехтера.

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

Обратите внимание, что в 1980-х у Apple был другой стандарт 72 DPI для экранов.

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

Как я уже упоминал, DPI экранов с годами становился плотнее, и мы видели экраны с разрешением от 120 до 160 DPI. А поскольку 1 дюймов CSS всегда равняется 96 пикселям CSS, теперь это означает, что дюйм CSS не равен реальному физическому дюйму.

Единица измерения баллов CSS

Единица измерения баллов ( pt ) является одной из менее известных единиц CSS. Как гласит Википедия:

«В типографике точка — это наименьшая единица измерения. Он используется для измерения размера шрифта, интерлиньяжа и других элементов на печатной странице».

На странице Википедии показана линейка со шкалой точек внизу и шкалой в дюймах вверху:

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

PPI и DPI

Мы уже упоминали DPI, и вы, возможно, слышали эти термины в прошлом, но если вы никогда не понимали, что именно они означают, вот краткое руководство:

• PPI
  Экраны состоят из множества маленьких светлых точек, называемых пикселями. Чтобы измерить плотность пикселей, мы подсчитываем количество пикселей, которые соответствуют 1 дюйму, называемому пикселями на дюйм (PPI).
• DPI
  Принтеры печатают цветные точки. Чтобы представить плотность точек принтера, мы подсчитываем количество точек, которое соответствует 1 дюйму бумаги, называемое количеством точек на дюйм (DPI).

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

• PPI : пикселей на дюйм (для экранов)
• DPI : точек на дюйм (для принтеров)

Важно отметить, что количество пикселей и точек CSS в 1 дюйма относятся как к ширине, так и к высоте. Это означает, что на экране с 96 пикселей на дюйм прямоугольник с высотой и шириной 1 дюймов будет иметь общий размер 9216 пикселей ( 96 × 96 пикселей = 9216 пикселей).

Вот визуальная демонстрация 1 дюймов с экраном 10 PPI:

Вот несколько примеров реальных расчетов CSS PPI:

«DPI» для экранов

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

Стандарты DPI/PPI

Для представления всех этих точек и пикселей у нас есть точка ( pt ).

Но единица измерения CSS определяется значением DPI принтера по умолчанию, которое, опять же, было принято в 1980-х годах и равно 72 DPI. Это означает, что 1 дюйма CSS всегда равно 72 пунктам.

• 1 дюйма = 72 точки
• 1 точки = 1/72 ^nd из 1 дюйма

Пиксели для Интернета, точки для принтеров

Для Интернета единица DPI не имеет значения. Веб-DPI определяется в соответствии с другим стандартом ( 96 DPI), о котором мы уже говорили, когда вычисляли CSS-дюйм и CSS-сантиметр. Из-за этого нет причин использовать точечный блок в Интернете.

Примечание : 1 точка не равна (CSS) пикселям.

• 1 точка = 1,333 пикселей
• 72 баллов = 1 дюйма
• 72 очков = 96 Пиксели

Принтеры

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

Мой тест печати

Я провел небольшой тест, чтобы проверить, правильно ли работает стандарт DPI 1980-х годов на принтерах. Я создал два ящика: один шириной и высотой 72 точки, а второй с шириной и высотой 1 дюйма.

Эти две коробки я распечатал на лазерном принтере, который стоит у меня в офисе. Вот мой Codepen для тестирования точек и дюймов для принтеров:

См. Pen [1 дюйм] (https://codepen. io/smashingmag/pen/ZEKxMMy) от Elad Shechter.

Результат

Я распечатал эту демонстрацию на лазерном принтере. К моему удивлению, если я использую 72 точки (или 1 дюйма), я получаю ровно 1 дюйма. Это означает, что для принтеров, возможно, все еще есть веская причина использовать единицы CSS, такие как пункты, дюймы и сантиметры.

Принтеры могут печатать больше DPI, но если мы работаем с масштабированием принтера 100% , то 72 точки (или 1 дюйма) CSS будет равняться реальному физическому дюйму.

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

Рекомендуем прочитать : Использование цветов HSL в CSS

Попытка создать точные размеры в Интернете

Если мы посмотрим на 16-дюймовый MacBook Pro, у которого соотношение 1,714 физических пикселей к каждому физическому пикселю. 1 Пиксель CSS, мы не можем точно предсказать размеры в Интернете.

Если мы попытаемся угадать реальное соотношение пикселей устройства на 16-дюймовом MacBook Pro, используя JavaScript window.devicePixelRatio , оно вернет неверное соотношение 2 вместо 1.714 . (И это без учета состояния масштабирования веб-браузера и операционной системы.)

Зачем нам нужны настоящие абсолютные единицы CSS

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

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

Стоит отметить, что Firefox реализовал реальную физическую единицу миллиметра ( mozmm ​​ ), но удалил ее в версии 59. Я не знаю, почему они ее удалили. Возможно, это потому, что так много вещей уже зависит от пикселей CSS, таких как адаптивные изображения и em и rem 9.0022 ед. Если бы мы попытались добавить новое физическое измерение, возможно, это создало бы больше проблем, чем решило бы.

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

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

На данный момент у нас нет реального способа описать физические размеры в CSS.

Итак, CSS-пиксель — наихудший тип абсолютной единицы, за исключением всех остальных.

Подведение итогов

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

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

Заключительные слова

Вот и все. Надеюсь, вам понравилась эта статья и вы узнали из моего опыта. Если вам понравился этот пост, я был бы признателен, если бы услышал об этом и поделился им.

Ссылки

• «Объяснение длины CSS», Tim Chien, Robert Nyman, Mozilla Hacks
• «Dots Per Inch», Wikipedia
• «Point (Typography)», Wikipedia
• «CSS Values ​​and Units», W3C

Сохранение абсолютного элемента внутри его родителя — LabSrc

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

Сводка

• 1. Что же такое происходит?
• 2. Не ставьте ребенка в угол
  • 2.1. Абсолютный ребенок
  • 2.2. Абсолютный ребенок с родителем-родителем

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

 #parent {
  граница: 3 пикселя, сплошной черный цвет;
  отображение: встроенный блок;
  набивка: 4ЭМ;
  поле: 1em;
}
#ребенок {
  граница: 3 пикселя сплошного синего цвета;
  цвет синий;
  сверху: 0;
  слева: 0;
  положение: абсолютное;
}