在底部上方放置按钮

Question

我正在尝试将这两个白色按钮略微（约10px）从底部定位，同时保持响应式（即更改视口的高度会相对于Div底部保持按钮位置）。我已经尝试了flexbox答案和绝对/相对定位，但都没有成功。这是相关的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

- DarkRunner

Answer 1

我首先需要覆盖包含箭头的relative容器。这个容器的自然边界防止了绝对定位的箭头被固定在视口底部。我将容器设置为static，然后将按钮定位在下一个相对定位的父元素的底部附近。

"Original Answer"的翻译是"最初的回答"

.slick-carousel {
  position: static;
}

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

.slick-prev {
  left: 0;
}

.slick-next {
  right: 40px;
}

CodePen

- Andy Hoffman

---

这很棒，但我想理解一下；如果我有任何误解，请告诉我；您使用了 top:inherit; 以使按钮的垂直位置与视口相同。但是为什么要使用 position:static？我认为 top/bottom/left/right 不能应用于 position: static。另外，transform:none 的意义是什么？谢谢。 - DarkRunner

@BigCoder101 [1] Slick设置了一堆默认样式，我们需要覆盖这些样式才能使其正常工作。对于箭头，我使用了“top: inherit”来删除已经应用的默认样式“top: 50%”。我设置了“transform: none”来覆盖Slick设置的默认“transform”样式。 - Andy Hoffman

@BigCoder101 [2] 包含箭头的直接父级 div 被设置为 position: relative。这将箭头围住，意味着 bottom: 50px 将箭头定位到父级底部。由于我们需要箭头保持在周围框的底部，因此我删除了直接父级的 relative 位置，这意味着箭头寻找下一个父级来定位自己的容器。那个下一个父级给了我们所需的灵活性。 - Andy Hoffman

Answer 2

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

这有所帮助，但是你使用 CSS 创建伪元素可能会出现问题，这不是实现你想要的效果的最佳方式。

- TheDev