Как сделать картинку героя поверх других слоёв, без использования absolute?

Question

[MadBliss]

Помогхите, делаю сайт на бутстрапе. Застрял на том, что не понимаю как картинку героя сделать поверх других слоёв, без использования position: absolute, т.к. мне надо, чтобы в блоке было видно 80% героя.

Comments

[Одиночка Айс]

Вы бы хоть привели что ли... Попробуйте что-то вроде position:relative; z-index:100;

Answer 1

[Роман]

Не совсем понятно, чем не устраивает position: absolute
"Герой" — это отдельный элемент. Соответственно разместить его поверх других элементов, кроме как через absolute невозможно!
Даже с использованием JS или JQ, под капотом все равно будет тот же absolute.

Если смущает выпадание элемента из родителя, то используйте overflow: hidden

.block {
  position: relative;
  overflow: hidden;
}
.block__hero {
  position: absolute;
}

Ах да! Еще можно использовать множественные фоны:

.block {
  background-image: url(hero.jpg), url(bg.jpg);
}