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

Курсы §11. Позиционирование
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

html3_ac118.jpg1366×768 167 KB

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

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