Спасибо за включение сайта!это позволило мне легко опробовать некоторые вещи.
Я бы добавил следующие правила CSS:
header{
z-index:1;
}
article.col{
height:100vh;
}
.card.carousel-style{
width: calc(100% - 30px);
position: absolute;
bottom: 0px;
}
Если вам нужно больше объяснений, давайте посмотрим на соответствующую структуру:
<div class="carousel-item">
<article class="col">
<div class="card carousel-style"></div>
</div>
<article class="col">
<div class="card carousel-style"></div>
</div>
<article class="col">
<div class="card carousel-style"></div>
</div>
</div>
На вашем сайте высота .carousel-item имеет высоту, увеличенную для соответствия самым высоким его дочерним элементам (одному из .card s).Поэтому, когда вы нажимаете на .card и он расширяется, .carousel-item становится выше.Все .card по умолчанию расположены наверху своего родителя, поэтому, когда родитель становится выше, они все поднимаются.
Если вы добавите правила CSS, которые я перечислил выше, тогда.carousel-item становится таким же высоким, как и страница, но каждый .card остается настолько низким, насколько это возможно, из-за position:absolute и bottom:0px.К сожалению, position:absolute испортил некоторые горизонтальные центрирования, поэтому мне пришлось добавить width: calc(100% - 30px), чтобы каждый .card центрировался в article.col.
РЕДАКТИРОВАТЬ:
Еще один эффект того, что .carousel-item становится таким же высоким, как и страница, заключается в том, что она закрывает вашу панель навигации.Поэтому мы должны выделить ваш заголовок поверх .carousel-item, чтобы пользователи все еще могли щелкнуть по нему.Поэтому установите z-index из .header на значение больше 0, и оно должно работать.