Вы можете установить родительский контейнер на position:relative
и установить кнопку / buttonContainer на position:absolute
.Это всегда будет позиционировать этот элемент относительно контейнера.
ELSE
Вы можете использовать display:flex
для достижения тех же результатов.
См. Фрагмент для обоих методов.
.container {
width: 100%;
position: relative;
height: 150px;
border: 1px solid black;
}
.button_container {
width:100%;
border: 1px solid red;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.button_buy {
height: 38px;
background: #35424a;
padding-left: 20px;
padding-right: 20px;
border: #e8491d 1px solid;
border-top: #e8491d 2px solid;
border-bottom: #e8491d 2px solid;
color: #ffffff;
}
.flex_container{
display: flex;
width: 100%;
height: 150px;
border: 1px solid black;
align-items: flex-end;
}
.flex_child {
width:100%;
border: 1px solid red;
text-align: center;
}
<div class="container">
<div class="button_container">
<button class="button_buy">Buy</button>
</div>
</div>
<br/>
<br/>
<div class="flex_container">
<div class="flex_child">
<button class="button_buy">Buy</button>
</div>
</div>