将按钮置于底部上方

Posted 2023-02-25

【中文标题】将按钮置于底部上方

【英文标题】：Position buttons above bottom

【发布时间】：2019-03-03 08:43:38

【问题描述】：

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

.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

【参考方案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

【讨论】：

这很棒，但试图理解；如果我有任何误解，请告诉我；您使用了top:inherit;，以便按钮的垂直位置与视口的垂直位置相同。但是你为什么用position:static？我认为上/下/左/右不能应用于位置：静态。另外，transform:none 的意义何在？谢谢

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

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

【参考方案2】：

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

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