底部上方的位置按钮

Question

我正在尝试将两个白色按钮放置在距底部略微 (~10px) 的位置，同时保持响应（即更改视口的高度会保留按钮相对于 div 底部的位置）。我试过 flexbox answer 和 absolute/relative 定位，但没有用。以下是有问题的 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;  
}

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

Answer 1

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

这会有所帮助，但是您使用 css 创建伪元素可能是个问题，这不是您想要的最佳方式

Answer 2

我首先需要覆盖包含箭头的 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

底部上方的位置按钮

Position buttons above bottom

html

css

carousel

flexbox

slick.js