将按钮置于底部上方

Question

我试图将两个白色按钮从底部稍微移开（〜10像素），同时保持响应状态（即，更改视口的高度会保持按钮相对于div底部的位置）。我尝试了flexbox answer和绝对/相对定位，但徒劳无功。以下是有问题的div：

.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

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;
}

CodePen

Answer 2

.item2 {
    display: flex;
    align-items: flex-end;
}

这有帮助，但是您使用CSS创建伪元素的操作可能会遇到问题，这不是完成所需操作的最佳方法