css怎么控制div的叠加

html-css019

css怎么控制div的叠加,第1张

css可以通过样式代码控制div叠加,具体代码如下:

.FaceDiv {

position:absolute

z-index:1000

width:248px

height:159px

}

.BackDiv {

position:relative

z-index:900

top:0px

left:0px

overflow:hidden

width:248px

height:159px

}

如果大盒子套小盒子,可以这样:

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