Зачем эти манипуляции с позиционированием?


#1

В данном примере создаётся градиентные границы. При этом прописаны такие правила:

h4 {
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;

Если я правильно понимаю, то смещение translate нейтрализовано значениями top и left.
Могу предположить, что значение relative нужно лишь чтобы относительно него позиционировались верхняя и нижняя градиентная рамка, с положением absolute.

А затем для псевдоклассов h4::before h4::after прописано

position: absolute;
top: 0;
left: 0;

И

position: absolute;
bottom: 0;
left: 0;

соответственно.
Для чего все эти манипуляции с позиционированием?
Градиент on jsbin.com


#2

Это еще один способ центровки. На счет position: relative; предположение верное.


#3

Центровки по вертикали внутри блока?


#4

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


#5

Странно, ведь мне пришлось в оригинал кода вписать text-align: center; чтобы отцентровать его. Текст изначально к левой границе жался


#6

Не текст, а блок в целом. h4 - блочный элемент.


#7

Тогда опять непонятно, если блочному элементу не задана конкретная ширина, то он занимает всю ширину окна. Не так ли? А значит и центровать блок по горизонтали не логично


#8

Да, правы. Тогда, чтобы использовать центровку по максимуму, допишите для заголовка display: inline-block;


#9

Не вариант. В этом случае градиентная заливка заголовка и рамок реагирует как на строчный элемент - заливает в пределах содержимого


#10

А разве это не то, чего вы хотите? Я ведь не знаю, откуда этот фрагмент кода. Может быть и так, что это просто недочёт в коде.


#11

В оригинале именно такой переход смотрится органичней, вроде рамка и осветление появляются из неоткуда и уходят в некуда :slight_smile:
А вот эти действия со смещениями меня как-то смущали. Для position: absolute; пишется

Если смещение задано, элемент позиционируется относительно его первого позиционированного (не static) элемента предка. Если у элемента нет предка с позиционированием (relative, absolute или fixed), тогда он будет смещаться относительно окна браузера.

В этом мне только и видется смысл этого relative и absolute, единственно может быть можно было обойтись условным смещением (нулевые значения), А если не прописать для псевдоэлементов top и bottom, то вообще рамки не отображаются. Почему?


#12

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


#13

А так, без display и позиционирования он себя как ведёт?


#14

Никак, его просто нету.


#15

А content: “”; не обозначает его наличие?


#16

Свойство пустое. Без отображения блочным элементом вы не можете задавать псевдоэлементу размеры.


#17

А свойство position эту проблему решает. Верно?


#18

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


#19

Понятно. Спасибо за ответы и беседу в целом. И спокойной ночи :slight_smile:


#20

Спасибо, вам тоже)