Question

我有一个布局，这是我的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，那么“内容”矩形覆盖其他的。我怎样才能解决这个问题？实际上我想要一个菜单栏，它是顶层的“层”并覆盖在它下面......

Answer 1

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

请注意，使用div作为此类背景并不是一个很好的解决方案。最好的是在你的身体标签上使用背景图片，你可以用背景尺寸拉伸它。它在所有现代浏览器中都受支持。唯一的问题是IE8和向下。
你的CSS很乱。在为具有相似属性的元素设置样式时，请使用类来代替每个ID样式。

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

- ＆GT; jsFiddle ＆lt; -

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;    
}

HTML：将4 <div>设置为背景</div>

1 个答案: