html - 分层多个 Div

Question

Mock Up Image

Live Preview

我正在尝试为 tumblr 主题编写上面的图像。我遇到了纹理 strip 和中央标题板的初始设置问题。它不是可以作为 body 背景的东西，因为我计划如图所示在其下方和上方放置一个 div。当我添加顶部: strip 的 39px 和顶部:斑 block 的 18px 时，它仅顶部对齐 18pxs。此外， strip 没有延伸到页面的整个宽度。

这是我当前未应用元数​​据的 strip 、斑 block 和可编辑标题的编码:

#bgstrip {
        background-image:url('http://static.tumblr.com/gxcukg0/b4un4hotv/bg-strip.png');
        background-repeat: repeat-x;
        background-position: center;
        height: 53px;
        width: 105%;
        left: 0;
        z-index: 95;
    }

#blogtitle {
        color: #553030;
        font-family: 'Dr Sugiyama', 'cursive';
        font-size: 72px;
        text-align: center;
        z-index: 105;
    }

#header {
        background-image:url('http://static.tumblr.com/gxcukg0/F3Tn4hn9n/plaque.png');
        background-repeat: no-repeat;
        background-position: center;
        z-index: 100;


<div id="bgstrip">
        <div id="header">
            <div id="blogtitle">{Title}</div>
        </div>
        </div>

Answer 1

要获得全宽，请从 body 上取下边距:

body, html {
    margin: 0;
}

然后，下面是实现您想要的一种方式(还有其他方式，但这是根据您当前的标记/css 实现的最简单的方式):

除非您已指定 position: absolute，否则不要将 bgstrip 定位在左侧。它会单独留下:0。

为了使内容推/拉顶部边距，我们还需要给它一点顶部填充。所以，我们需要给它一点 padding-top。

#bgstrip {
    background-image:url('http://static.tumblr.com/gxcukg0/b4un4hotv/bg-strip.png');
    background-repeat: repeat-x;
    background-position: center;
    height: 53px;
    z-index: 95;
    padding-top: 1px;  
    margin-top: 25px;
}

然后，要使中心徽章位于您想要的位置，请使用负上边距，如下所示:

#blogtitle {
    color: #553030;
    font-family: 'Dr Sugiyama', 'cursive';
    font-size: 72px;
    text-align: center;
    z-index: 105;
    margin-top: -25px; 
}