Css 为什么这些div重叠？

我想要的很简单：

[vimeo | facebook | twitter共享版权所有]

但我的div重叠了。或者他们走到了页脚之外。或者他们用另一种方式伤害了我的大脑。而且我觉得我有办法为我想要的简单的东西做更多的css。如何在干净的情况下做到这一点

<div class="footer">

    <div class="copyright">
        <p>© 2016 css hurts my brain</p>
    </div>

    <div class="social-media">
        <div>Vimeo</div>
        <div>Facebook</div>
        <div>Twitter</div>
    </div>

    <div class="share-menu-button">
        SHARE
    </div>

</div>


.footer {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 20;
}

.footer .copyright {
    position: absolute;
    bottom: 0;
    float: left;
}

.footer .social-media {
    position: absolute;
    bottom: 0;
    float: left;
}

.footer .share-menu-button {
    position: absolute;
    bottom: 0;
    float: left;
}

.social-media div {
    float:left;
}

©我的大脑受伤了

维梅奥
脸谱网
啁啾
分享
.页脚{
位置：固定；
宽度：100%；
高度：100px；
底部：0；
z指数：20；
}
.footer.版权所有{
位置：绝对位置；
底部：0；
浮动：左；
}
.footer.社交媒体{
位置：绝对位置；
底部：0；
浮动：左；
}
.footer.share菜单按钮{
位置：绝对位置；
底部：0；
浮动：左；
}
.社交媒体部{
浮动：左；
}

为什么不直接使用，不需要为html中给定的标准格式化过程创建div。这可能会解决一个问题

也不需要在VIMEO、FACEBOOK、TWITTER上使用div，只需使用

<p> Vimeo, Facebook, Twitter </p>

Vimeo、Facebook、Twitter

如果你想让他们的链接，那么它是类似的

<p>
<a href="vimeo.com">Vimeo</a>
<a href="facebook.com">Facebook</a>`enter code here`
<a href="twitter.com">Vimeo</a>
</p>

`在这里输入代码`

---

没有必要使用这么多div

您的css有几个问题：

使用

位置：绝对
时，浮动无效

使用

position:absolute

时，将堆叠所有绝对定位的元素（除非为它们指定不同的位置）

只需使用无位置的浮动：

 .footer {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 20;
    background: #000;
    color: white;
}

.footer >div , .social-media > div{
  padding: 16px 20px;
}

.footer .copyright {
    float: left;
}

.footer .social-media {
    float: left;
}

.footer .share-menu-button {
    float: left;
    margin-top: 16px;
}

.social-media div {
    float:left;
}

---

fiddle:

谢谢，你刚刚把我从一个非常愤怒的模式中拉了出来：）当我使用这个时，元素的顺序为什么会改变？：

.footer.social media{float:right；}.footer.share菜单按钮{float:right；margin top:16px；}

这也是我的css:Q:我如何才能在底部得到一个div a:使用绝对位置和。。。问：我该怎么做。。。答：不要使用绝对位置…这是浮动的工作方式，第一个元素始终保持在第一位，因此如果向右浮动，第一个元素将是右侧的第一个元素，依此类推。看起来你需要更深入地学习CSS，网络上有很多书面/视频材料。不，我要退出webdesign:）