在其他元素上有元素

Question

所以我有一个标题，我不确定如何编写应该略低于它的三个元素框，但仍然在它的末尾，如下图所示：

一种方式，可能是位置绝对位置和margin-top ，或者我应该切片图像，所以方框的顶部是带有标题背景的图片......

.box {
   position: absolute;
   margin-top: -30px;
}

或者我应该怎么做？

Answer 1

下次您应该发布一些您尝试过的代码。反对我更好的判断，我完全按照你所做的那样做了。

http://jsfiddle.net/xD69h/

<强> HTML：

<div id="a">
<span id="a-text">A</span>
<div id="b">
    <span id="b-text">B</span>
</div>
<div id="c">
    <span id="c-text">C</span>
</div>
</div>

<强> CSS：

#a {
width: 100%;
height: 150px;
background-color: #EFE4B0;
border: 3px solid #FFABCA;
color: #B97A57;
}
#a-text {
float: left;
}
#b {
width: 200px;
height: 150px;
background-color: #7092BE;
border: 4px solid black;
border-radius: 5px;
color: #B97A57;
float: left;
margin-top: 50px;
margin-left: 50px;
}
#c {
width: 200px;
height: 150px;
background-color: #B97A57;
border: 4px solid #B97A57;
color: white;
float: left;
margin-top: 50px;
}