CSS - 元素的定位（绝对标题，正文，固定页脚）

Question

我对html和css很陌生，而且我现在遇到了两个恼人的问题。

1. 除非我的标题位置是绝对的，否则它不会覆盖其上方和下方的小区域。但是当位置是绝对位置时，它下方的容器部分地位于标题后面。

我希望我的标题覆盖与其位置绝对时相同的区域，但我希望容器的位置自动位于标题下方。

1. 当我将页脚分成两半时，“开始”位于左侧，“联系”位于右侧，并将版权部分添加为浮动：右侧的所有其他内容都被推到一边

我希望“开始”和“联系”从中间扩展到两侧，而版权部分则位于最右侧。一切都在同一条线上。

标题的不透明度仅用于显示问题 中间的一行是为了确保页脚的文本位于中间 我想避免使用滚动条。

https://jsfiddle.net/swvyrLnf/

header {
    width: 100%;
    opacity: 0.5;
    position: absolute;
    top: 0;
    background-color: black;
    color: white;
    text-align: center;
}

Answer 1

对于标题：将标题高度设置为100px。然后将身体的边缘顶部设置为100px。

对于滚动条：这部分取决于正文的高度。如果你想避开滚动条，那么你可能需要将体高从100％改变。

对于联系人/共享链接：我向左/右添加填充，以便它们彼此分开。为了使它们伸得更远，你可以改变文本的大小。另一种选择是将它们放入宽度为40％的容器中，并使整个容器成为一个链接。

Answer 2

1. header应该有overflow: hidden;然后你没事。这是因为里面的项目有margin扩展容器。