Как вытолкнуть блоки из родителя на 10px в моем примере, не используя абсолютного позиционирования?

Question

[Aleksey111]

https://codepen.io/Aleks70694/pen/VPRXLp?editors=1100#0

Answer 1

[Дмитрий Лузанов]

selector {
  position: relative;
  top/right/bottom/left: npx;
}

// ---------------
.lt, .rt, .rb, .lb {
  position: relative;
}
.lt, .rt {
  top: -10px;
}

.rb, .lb {
  bottom: -10px;
}

// или
.lt, .rt {
  transform: translate(Xpx, Ypx);
}

.rb, .lb {
  transform: translate(Xpx, Ypx);
}

Бонус

Comments

[Aleksey111]

есть ли еще способы? чисто на css

[Nwton]

Aleksey111: зачем вам еще, это прекрасно работает и на чистом css

[Дмитрий Лузанов]

Aleksey111: добавил другой, менее кроссбраузерный способ

[Aleksey111]

Nwton: нужен тот, что выталкивает margin-ами, это только с абсолютным позиционированием работает?

[Дмитрий Лузанов]

Aleksey111: выталкивать margin-ами неверный подход. За такое надо лишать лицензии frontend разработчика.

[Aleksey111]

Predve4niy: мне говорили, что при исп. абсолютно позиционирования с top/right/bottom/left и элементов, управляемых языком джаваскрипт, страничка будет притормаживать, т.к. идут серьезные затраты производительности на обработку элементов, выпавших из потока, и поэтому налево и направо нельзя эти эл. использовать, только там, где без этого не обойтись. Это так? Про относительное позиционирование не говорили, но я думал, что его тоже из за оптимизации его исп. не стоило

[Дмитрий Лузанов]

Aleksey111: возможно гуру JS знают больше тонкостей. Но на практике я не сталкивался с описанной вами проблемой. В вашем случае нет никакого JS.

[Дмитрий Лузанов]

Aleksey111: и от 10px точно ничего не затормозит -_-

[Aleksey111]

Predve4niy: ясное дело, просто исхожу из задания

[Дмитрий Лузанов]

Aleksey111: попробуйте использовать второй способ с префиксами CanIUse