固定/相对定位：答案

【问题标题】：Fixed/Relative Positioning:固定/相对定位：
【发布时间】：2014-06-26 00:59:19
【问题描述】：

我正在尝试制作一个包含两个“固定”侧边栏图像和一个“固定”标题图像的页面。由于标题是固定的（从顶部开始的 0 到 10%）。我不希望标题图像与页面上的任何文本重叠。我尝试将段落标签定位为“相对”，并将其设置为距顶部 10%，但图像仍与文本重叠。我该如何解决这个问题？

这就是我的意思：http://jsfiddle.net/KSz59/

.header {
    width: 70%;
    height: 10%;
    position: fixed;
    top: 0px;
    left: 15%;
    z-index: -1;
}

p {
    position: relative;
    top: 10%;
    margin-left: 20%;
    margin-right: 20%;
}

【问题讨论】：

添加一些代码或在jsfiddle.net重新创建问题
将margin-top: 10% 添加到body
给段落顶部 10% 的边距
@Huangism 我会，但我不知道如何将图像上传到 jsfiddle
使用 placehold.it 和 placekitten.com 等网站的占位符图片。

标签： css

【解决方案1】：

使用您当前的设置，您必须绝对定位 p

http://jsfiddle.net/KSz59/2/

p {
    margin-left: 20%;
    margin-right: 20%;
    top: 10%;
    position: absolute;
}

如果你有更多的内容，那么最好将p 替换为内容 div 并将所有内容放在 div 中

【讨论】：