css样式 div两个盒子上下叠加如下图怎么写啊？

html-css03

css样式 div两个盒子上下叠加如下图怎么写啊？,第1张

如果大盒子套小盒子，可以这样：

<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多种方式实现，上述只是其中的一两种

正常情况下和float情况下只需要设置margin-top就可以调整距离上面元素的距离，如果元素是使用relative或者absolute就得使用top和left来设置距离上侧和左侧的距离了