Описание
Необходимо в шапке прикрепить кнопку к низу header
Слайдер растянут через absolute на всю высоту header
Верстка блока выполнена по сетке Bootstrap
Что пробовал
Вариант1 - не особо подходит, тк кнопка должна занимать две колонки по макету
Кнопка спозиционирована относительно header
Вариант 2 - кнопка внутри контейнера--row--col-2
Кнопка размещаться сразу под header-top, несмотря на то что у header задана высота в 900 px
(из за того что кнопка обернута в container позиционирование происходит не отношению к header а по отношению к container)
Подобная ситуация и с соц кнопками, они спозиционированы относительно своего родителя (wrap) который также absolute его стили
&-wrap
position: absolute
padding-top: 800px
right: 0
top: 0
&-social
position: absolute
right: 0
bottom: 0
justify-content: flex-end
Кнопку спозиционировать таким же способом как и кнопки соц сетей?
<header class="header">
<div class="header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-2">
<div class="header-top__wraps">
<div class="header-logo">
<picture>
<source media="(max-width: 768px)" srcset="img/header/header-logo-mobile.png">
<img src="img/header/header-logo.png" alt="Come Back">
</picture>
</div>
<!-- /.header-logo -->
<a href="#nav" class="header-nav__button">
<span class="header-nav__line"></span>
</a>
</div>
<!-- /.header-wraps -->
</div>
<div class="col-1 col-sm-12 col-lg-6 offset-xl-1">
<nav class="header-navigation hidden-mobile header-navigation__active">
<button class="header-navigation__close">
<span class="header-nav__line header-nav__line-close"></span>
</button>
<ul class="header-navigation__list">
<li class="header-navigation__item">
<a href="#" class="header-navigation__link">Услуги</a>
<!-- /.header-navigation__link -->
</li>
<!-- /.header-navigation__item -->
<li class="header-navigation__item">
<a href="#" class="header-navigation__link">Портфолио</a>
<!-- /.header-navigation__link -->
</li>
<!-- /.header-navigation__item -->
<li class="header-navigation__item">
<a href="#" class="header-navigation__link">О нас</a>
<!-- /.header-navigation__link -->
</li>
<!-- /.header-navigation__item -->
<li class="header-navigation__item">
<a href="#" class="header-navigation__link">Контакты</a>
<!-- /.header-navigation__link -->
</li>
<!-- /.header-navigation__item -->
</ul>
<!-- /.header-navigation__list -->
</nav>
<!-- /.header-navigation -->
</div>
<div class="col-12 col-lg-4 col-xl-3 hidden-mobile">
<a href="tel:+380956685555" class="header-top__phone">
<img class="header-top__icon" src="img/header/phone-icon.png" alt="Наш телефон">
<span>+38(095)668-55-55</span>
</a>
<!-- /.header-top__phone -->
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.header-top -->
<div class="header-slider">
<div class="header-slider__item">
<div class="header-slider__content">
<div class="container">
<div class="row">
<div class="col-6">
<span class="header-slider__subtitle">Архитектура</span>
<!-- /.main-slider__subtitle -->
<h1 class="header-slider__title">
Cпособ сделать жизнь лучше
</h1>
<!-- /.main-slider__title -->
<p class="header-slider__descr">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<!-- /.main-slider__descr -->
</div>
</div>
</div>
</div>
<!-- /.header-slider__content -->
</div>
<!-- /.header-slider__item -->
</div>
<!-- /.header-slider -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="header-wrap">
<div class="social-block header-social">
<a href="#" class="social-block__link" title="Мы в Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<!-- /.social-block__link -->
<a href="#" class="social-block__link" title="Мы в Instagram">
<i class="fab fa-instagram"></i>
</a>
<!-- /.social-block__link -->
<a href="#" class="social-block__link" title="Мы в Twitter">
<i class="fab fa-twitter"></i>
</a>
<!-- /.social-block__link -->
</div>
<!-- /.social-block -->
</div>
<!-- /.header-wrap -->
</div>
</div>
<div class="row">
<div class="col-2">
<button class="button">КНОПКА</button>
</div>
</div>
</div>
</header>
Кнопка имеет стиль описанный в варианте 2
/*HEADER*/
.header
position: relative
z-index: 5
height: 980px
border: 5px solid red
.button
position: absolute
bottom: 0
left: 0
Хочу кнопку опустить вниз как лучше сделать
Простой
Простой
