Box центрируется относительно позиционированного parent, а текст с классом title будет зелёным: последнее одинаково специфичное правило выигрывает.
Центрирование box и порядок одинаковых CSS-правил
Box центрируется относительно позиционированного parent, а текст с классом title будет зелёным: последнее одинаково специфичное правило выигрывает.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
.parent { position: relative; height: 100vh; }
.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.title { color: red; } .title { color: blue; } .title { color: green; }
Ответ
Box центрируется относительно позиционированного parent, а текст с классом title будет зелёным: последнее одинаково специфичное правило выигрывает.
Top/left:50% размещают точку привязки box посередине содержащего блока, а translate(-50%,-50%) смещает его на половину собственных размеров. Absolute исключает box из обычного потока. Вывод про цвет предполагает одинаковый origin/layer правил и отсутствие других переопределяющих деклараций.