@Azamat_TURBO

Как заставить флекс-элемент «выпирать» из флекс-контейнера?

Суть такова: нужно чтобы флекс-контейнер был 70px высотой. Флекс-блок внутри должен быть 100px высотой и как бы "выпирать" на 30px из контейнера, не растягивая его под свою высоту.
Из возможных вариантов была мысль использовать position: absolute, но ничего толком не вышло.

Как мне модифицировать, например такой код, чтобы получилось реализовать задуманное?
https://codepen.io/Azamat_TURBO/pen/BXmMjq?editors=1100
  • Вопрос задан
  • 129 просмотров
Решения вопроса 2
fallus
@fallus
Дать блоку
margin-bottom: -30px;
или
margin-top: -30px;
Ответ написан
Комментировать
Azamat_TURBO,

1) в описании проблемы Вы указываете, что высота контейнера 70px, а в коде ему задана высота 100px.

2) Вы не указали, куда должен выступать дочерний элемент (в какую сторону). В примерах рассмотрю вариант, при котором элемент выступает вниз.

Пример №1 (относительное позиционирование):
Дочернему элементу задать
position: relative;
  top: 30px;

https://codepen.io/hisbvdis/pen/xvPBGW?editors=1100

Пример №2 (трансформация):
Дочернему элементу задать
transform: translateY(30px);
https://codepen.io/hisbvdis/pen/bXYZEV?editors=1100

Пример №3 (абсолютное позиционирование):
Родителю
position: relative;
Дочернему
position: absolute;
  top: 30px;

https://codepen.io/hisbvdis/pen/bXYZEV?editors=1100
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы