Как сделать картинку героя поверх других слоёв, без использования 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);
}

Answer 2

[Икотий Айтишевич]

Только через absolute и z-index, через box-sizing: border-box. Либо уже через JQuery или JS.

Comments

[MadBliss]

А через js или jquery примерно как?

[Икотий Айтишевич]

Вообще можно сделать блок с фоном и поверх наложить фильтр с нужным размером и задать нужную прозрачность. А внутри сделать два блока с текстом и изображением, а после задать им нужные отступы.

А насчёт JQuery гуглите .offset() и .position()