Сделал вот такой блок, пришло его делать через абсолютное позиционирование.
Доделал блок. Пришло время приступать к следующему. Но этот новый элемент у меня делается поверх прошлого, еще и когда я пишу "text-align:center" он делается по центру относительно левой картинки. Кароче, вообще ничего не понимаю и не знаю как это исправлять.
spoiler<div class="banners">
<div class="container">
<div class="banners__item">
<img src="img/banner1.png" alt="banner" class="banners__item_first_img">
<a href="#" class="banners__item_first_link">Смотреть</a>
</div>
<div class="banners__item_right">
<a href="#"><img src="img/banner2.png" alt="banner" class="banners__item_second"></a>
<a href="#"><img src="img/banner3.png" alt="banner" class="banners__item_third"></a>
</div>
</div>
</div>
<div class="goods">
<div class="container">
<h2 class="goods_title">Популярные товары</h2>
</div>
</div>
.banners__item_first_img{
position: absolute;
z-index: -1;
}
.banners__item_first_link{
display: block;
color: #313131;
z-index: 1;
text-transform: uppercase;
font-weight: 500;
padding: 10px 20px;
border: 2px solid #bc8c30;
background-color: #fff;
margin-left: 50px;
position: absolute;
margin-top: 280px;
}
.banners__item_first_link:hover{
background-color: #bc8c30;
color: #fff;
transition: 0.5s;
}
.banners__item_right{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: column;
-ms-align-items: center;
align-items: center;
}
.banners__item_right{
float: right;
}
.banners__item_third{
margin-top: 29px;
}
.goods_title{
text-align: center;
}
Средний
Средний