<div style="position:relativewidth:400pxheight:300pxbackground-color:yellow">
<div style="position:absolutebottom:0left:50pxwidth:300pxheight:150pxbackground-color:red"></div>
</div>
如果两个盒子是独立的，则可以这样：
<div style="width:400pxheight:300pxbackground-color:yellow"></div>
<div style="position:relativetop:-150pxleft:50pxwidth:300pxheight:150pxbackground-color:red">2</div>
其实有N多种方式实现，上述只是其中的一两种
那就看你要怎么去实现这个虚线了，比如实现虚线的方式有用div，有hr水平线方式。\x0d\x0adiv的方式就可以这样写： border-top:1px #ccc dashed，只留一条边可见，其它边不可见，虚线的属性是 dashed\x0d\x0a如果你用hr实现也是可以的，同样也可以在样式里写 dashed属性值\x0d\x0a这样就实现虚线了。CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。
扩展资料：
CSS盒子模型特点：
1、丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3、多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
参考资料来源：百度百科-CSS盒子模型
