Какой вариант позиционирования элементов наиболее кроссбраузерен?

Question

[wowwek]

Какой вариант позиционирования элементов наиболее кроссбраузерен: через псевдокласс after или через обычный блок c абсолютным позиционированием?

Как по вашему должно выглядеть DOM дерево для корректного отображения и на мобильной версии прикрепленного мною примера для элемента 1 и 2?

Я обычно делаю через отрицательные значения отступов и абсолютное позиционирование, но уверен, что это не всегда верно. Как делаете вы?

Answer 1

[archelon]

Псевдоэлементы :before и :after поддерживаются начиная с IE8, position - с IE6.
Но не думаю, что стоит переживать о браузерах старше IE8.

Answer 2

[Егор Живагин]

Да как хочешь, работать они будут примерно одинаково. Я больше любли псевдоклассы, ибо меньше кода в разметке.

<div class="block" />

.block{
// ...
position: relative;
}

// 1
.block:before{
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(50%, -50%);
}

// 2
.block:after{
  content: '';
  position: absolute;
  bottom: 0px;
  right: 50%;
  transform: translate(50%, 50%);
}

Comments

[wowwek]

Но ведь если задать ширину у блока №2, то он скатится правее, как в этом случае лучше поступить?

[Сергей delphinpro]

wowwek, с приведенными стилями не откатится

[Егор Живагин]

wowwek, он никуда не откатится из-за transform: translate.
right сдвигает блок на половину ширины родителя влево
transform сдвигает блок на половину собственной ширины вправо

Это старенький метод центрирования

Answer 3

[Odisseya]

• Абсолют.позиционирование — кроссбраузернее, ограничения: для сеток лучше не использовать, надо учитывать контекст наложения.
  
• Псевдо-элементы, достаточно хорошо поддерживаются, ограничения: не подходят для одиночных тегов (input), не воспринимаются через JS.
  

Для декоративных элементов подходят оба варианта, для контентных — первый.