为什么固定位置会打乱我的对齐方式？答案

【问题标题】：why is fixed position messing up my alignment?为什么固定位置会打乱我的对齐方式？
【发布时间】：2012-12-19 17:55:10
【问题描述】：

我试图保持标题不动，并将其余内容滚动到其下方。我能够做到这一点，但是当我在我的两个标题 div 上放置一个固定位置时，自动突破边距。

css:

.structure {
    width:960px;
    padding:20px;
    margin:0px auto 0px auto;
    background:#121212;
    border-left:5px #F06BA8 solid;
    border-right:5px #F06BA8 solid;
}
.header_home_structure {
    width:960px;
    margin:0px auto 0px auto;
    position:fixed;
    height:80px;
}
.header_home_bg {
    width:100%;
    background:#121212;
    border-bottom:3px #F06BA8 solid;
    height:80px;
    position:fixed;
}

html:

<body>
    <div class="header_home_bg clearfix">
        <div class="header_home_structure clearfix">
            </div>
        </div>
    <div class="structure clearfix">
    </div>
</body>

【问题讨论】：

标签： html css css-position

【解决方案1】：

只在容器div上使用position: fixed，不要使用两次

Demo

.structure {
    width:960px;
    padding:20px;
    margin:0px auto 0px auto;
    background:#121212;
    border-left:5px #F06BA8 solid;
    border-right:5px #F06BA8 solid;
}
.header_home_structure {
    width:960px;
    margin:0px auto 0px auto;
    height:80px;
}
.header_home_bg {
    width:100%;
    background:#121212;
    border-bottom:3px #F06BA8 solid;
    height:80px;
    position:fixed;
}

【讨论】：

他可能还想在 .structure 中添加 margin-top: 80px ，这样固定的标题就不会重叠了。
@ChrisHerbert ya 我对他的期望太高了..比一个好点，而且我不明白固定 div 如何破坏他的布局