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

在讨论中清理完毕后，我相信这是您正在寻找的内容：http://jsfiddle.net/WBF6s/

更改包括：

删除div。
在position:relative上设置section。
将a设置为position:absolute和display:inline-block。
将a设置为left:0，right:0，bottom:0和margin:0 auto。

Answer 2

position:fixed，将元素相对于窗口放置。

使用position:absolute，元素将相对于最近的定位父移动，这意味着容器必须自己设置position属性。

我们通常通过将position属性设置为relative来使容器相对定位。

所以，你应该让你的section或你的div亲戚和你的箭头绝对。

Answer 3

作为一个FYI，position:fixed保留用于在屏幕上放置元素而不管其中的其他元素。无论怎样，它都会自动固定在窗户上。如果您希望将其粘贴在元素的底部（或顶部或任何部分），则需要使用position:absolute。 position:absolute的警告是，你总是需要它的父母在其上有一个位置。最具破坏性的方法是给你的父母position:relative，这将确保父母总是在同一地点。

我已经做了一个非常快速的小提示，告诉你出了什么问题： 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来做同样的事情。

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

3 个答案: