html - CSS 位置固定在 DIV 部分的底部

Question

我试图将箭头固定到 div 部分的底部，但由于某种原因它不起作用，

这是我的 html 代码:

    <section>
         <div style="margin:auto; text-align: center; position:relative; width:61px">
                     <a class="scroller-arrow"  href="#offset2"></a>
              </div>
       </section>

CSS 代码:

    section { 
    padding: 10%; 
    margin: 0 auto;
    background-image: url("/images/text-bar-strip.png");
    background-repeat: repeat-x;
    height: 393px;
    }

    .scroller-arrow 
    {
     background-image: url("/images/down-arrow.png");
     cursor: pointer;
     display: block;
     height: 61px;
     margin: 0 auto;
     width: 61px;
     position:fixed;
     bottom:-11px;
     }

它总是显示在我的屏幕底部而不是该部分的底部？你能帮助我吗？非常感谢:)

Answer 1

仅供引用，position:fixed 保留用于将元素放置在屏幕上，而不管那里的其他元素。无论如何，它都会将自己固定在 window 上。如果你想让它卡在元素的底部(或顶部或任何地方)，你需要使用 position:absolute。 position:absolute 的警告是你总是需要它的父级在它上面有一个位置。最无损的方法是给你的 parent position:relative ，这将确保 parent 总是在同一个地方。

我制作了一个非常快速的 jsfiddle 来向您展示问题所在: http://jsfiddle.net/AuGe2/

当你想把一些东西放在一个元素的底部时，你需要它是

.arrow{
    height:40px;
    width:40px
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-20px //Or half the width of the element
}

注意 left:50% 和 margin-left:-20px 这是盒子中绝对元素居中的原因。您将元素移动到超过父元素宽度的 50%，然后您需要回溯一点，因为它正在移动元素的最左侧。您通过在元素大小的一半处减去相同的边距来回溯。您也可以对 top 执行相同的操作。