Question

我对所有这些定位的东西都很头疼，所以我决定问你这个问题;我已经阅读过关于这种东西定位的博客，但作为初学者，找到确切的答案有点困难。

我有以下问题：

在图像中你会看到我拥有的东西（我不能发布它，所以这里是SS的链接：http://gyazo.com/bbea3f21abf77515288719296e496fcc），我想移动：“copyright blablabla”在底部使用页脚的所有宽度的页脚，我已经尝试过以下所有内容：

footer #copyright{
    font-size: 75%;
    top: 20em; /* just trying*/
    position: relative;
    text-align: center;
    width: 100%;

但是div不断触及其他元素（条款和条件，隐私和保持完全像你在图像中看到的那样）。 “条款和条件等”的代码就是这个：

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;

任何人都可以帮助我吗？

PD：我添加了我的HTML代码：

    <footer>


        <li><a href="#contactus">Contact us</a></li>
        <li><a href="#privacy">Privacy policy</a></li>
        <li><a href="#terms">Terms and conditions</a></li>
        <li><a href="#aboutus">About us</a></li>

        <a id="copyright">Copyright 2015 Pepito S.L., All Right Reserved.</a>

    </footer>
</body>

关于我的CSS，就是这个：

* {
    margin: 0;
    padding: 0;
    font-family: verdana;
}

footer {
    width: 100%;
    height: 12em;
    background-color: #363636;
}

footer li {
    list-style: none;
    text-transform: uppercase;
}

footer li a{
    font-size: 90%;
    text-decoration:none; /* Quita toda decoracion del texto*/
    position: relative;
      /* este comando convierte en boton el reectangulo*/
    vertical-align: text-top;
        float: right;
         width: 30%;


         /* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

}

footer a #copyright{
    font-size: 5%;
    position: absolute;
    text-align: center;
    bottom: 0;

/* Borde para ver el div*/
    color: #696969;
      border: 1px solid #f00;

 }

Answer 1

尝试按下页脚

footer {
    position: absolute; /* or fixed if you want */
    bottom: 0;
}

这会将其设置在页面底部，空格为0像素，因此直接位于底部。

如果您还想要将某些东西相对地放置在如右图所示的位置并且元素的宽度未知，那么请记住此技术，因此您不必计算它从左边开始的数量，而只是设置右侧的空格，如right: 25px;。

同时阅读并理解每个position属性（相对，绝对，静态，固定）之间的差异，这将对您有所帮助！在我理解了这一点之后，我觉得升级10级！这有很大帮助，我可以优化我做过的所有事情，并防止我过去遇到的麻烦问题。

修改

此时已对问题进行了编辑并提供了代码。我假设顶部链接是标题，但现在我明白整个页面应该是页脚。

因此单独定位页脚不会产生影响，因此Mathieu David的解决方案应该适合。

让这成为一个例子：为什么我总是应该提供尽可能多的信息和细节，尽可能地提出要求而不是自信，因为其他人不知道你到底是什么试图

Answer 2

您可能想要的是在页脚div中设置position: relative并将position: absolute放入包含版权的元素中。

<footer>
    ...
    <div class="copyright">Copyright</div>
</footer>

并在css中

footer{
    position: relative;
}

.copyright{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

JSFidle

Answer 3

使用position: absolute;（和relative至footer）。

footer {height: 130px; position: relative;}
footer #copyright {position: absolute; bottom: 0;}

https://jsfiddle.net/zkxjasf0/

页脚部分中的一些div有

3 个答案: