html - 底部上方的位置按钮

Question

我正在尝试将两个白色按钮放置在距底部略微 (~10px) 的位置，同时保持响应(即更改视口(viewport)的高度会保留按钮相对于 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 容器。这个容器的自然边界阻止了绝对定位的箭头被固定到视口(viewport)的底部。我将容器设为 static，然后将按钮放置在下一个相对位置最高的父级的底部附近。

.slick-carousel {
  position: static;
}

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

.slick-prev {
  left: 0;
}

.slick-next {
  right: 40px;
}

CodePen