html - 将按钮置于底部上方

Question

我试图将两个白色按钮定位在距离底部稍稍（~10px）的位置，同时保持响应（即改变视口的高度保持按钮相对于 div 底部的位置）。我已经尝试过flexbox answer和绝对/相对定位，但徒劳无功。以下是有div问题的 s：

.item2{
    background-color:#EF5350;
    width:50%;
    padding-left:5%;
    padding-right:5%;
    padding-top:5%;
    box-sizing: border-box;    
    position:relative;
    transition: 0.3s ease all;
}

.slick-prev:before, .slick-next:before{
  color: whitesmoke;
    font-size: 60px;
  margin-top: auto;
    align-self: flex-end;
    transition: 0.3s ease all;  
}

完整代码链接：https ://codepen.io/Refath/pen/drMrYW?editors=0100

标签： htmlcssflexboxcarouselslick.js

Answer 1

我首先需要覆盖relative容纳箭头的容器。这个容器的自然边界阻止了绝对定位的箭头被固定到视口的底部。我制作了容器static，然后将按钮放置在下一个相对位置最高的父级的底部附近。

.slick-carousel {
  position: static;
}

.slick-prev,
.slick-next {
  transform: none;
  top: inherit;
  bottom: 50px;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 40px;
}

代码笔