2

我有一个布局，这是我的 css：

body {
    background-color: #16193B; /* Old browsers */
    margin: 0;
    padding: 0;
    color: white;
    background-attachment: fixed;
    overflow: hidden; 
}

html {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

#content {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : hidden;
}


#wrap div{
    height:100%;
    width:100%;
}

#b1 {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #35478C;
    position:relative;
}

#b2 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #4E7AC7;
    position:relative;
}

#b3 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #7FB2F0;
    position:relative;
}

#b4 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : auto;
    position:relative;
}

这就是 HTML 文件的正文：

    <div id="b1">

        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="content">

                    </div>
                </div>
            </div>
        </div>

    </div>

这是我的布局，但它应该只是页面的背景......不幸的是，如果我将文本添加到其他一些 div 然后“内容”矩形覆盖其他。我怎样才能解决这个问题？实际上我想要一个菜单​​栏，它是顶部的“层”并覆盖在它下面......

4

1 回答 1

4

好的，在您查看我的 jsFiddle-Solution 之前：

  1. 请注意，将 div 用于此类背景并不是一个很好的解决方案。最好在您的身体标签上使用背景图像，您可以使用背景尺寸进行拉伸。所有现代浏览器都支持它。唯一的问题是 IE8 及以下版本。

  2. 你的 CSS 是一团糟。当对具有相似属性的元素进行样式设置时，请使用类而不是单独设置每个 ID 的样式。

我基本上用你的自定义内容和你的背景 div 上的一个类创建了一个新的 div。我还必须清理你的 CSS 并删除不必要的语句：

-> jsFiddle <-

HTML：

<div  class="centerIt" id="b1">
    <div  class="centerIt" id="b2">
        <div  class="centerIt" id="b3">
            <div  class="centerIt" id="b4">
                <div id="content"></div>
            </div>
        </div>
    </div>
</div>
<div id="contentContainer">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi laboriosam illum esse voluptas libero aperiam voluptate omnis dolor odio natus tempore sunt doloribus. Suscipit iure vel totam eius reprehenderit.</div>
</div>

​ CSS：

.centerIt {
    position: relative;
    margin-left: auto;
    margin-right: auto;    
}
于 2012-11-21T20:44:23.063 回答