css - 固定/相对定位 :

Question

我正在尝试制作一个包含两个“固定”侧边栏图像和一个“固定”标题图像的页面。由于标题是固定的(距顶部 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%;
}

Answer 1

根据您当前的设置，您必须绝对定位 p

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

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

如果您有更多内容，那么最好用内容 div 替换 p 并将所有内容放入 div