[置顶] 关于CSS3中多个DIV 盒子叠加计算问题

关于CSS3中多个DIV盒子叠加计算问题

<!DOCTYPE html>

<html lang="en">

        <head>

               <metacharset="utf-8">

               <metahttp-equiv="X-UA-Compatible" content="IE=edge">

               <metaname="viewport" content="width=device-width,initial-scale=1">

               <title>DIV盒子叠加计算</title>

               <styletype="text/css" media="screen">

                       div.outer{width:350px;height:350px;padding:0px;border:1pxsolid green;}

                       div.outerdiv{width:200px;height:200px;padding:0px;color:white;font-size:20px;position:relative;}

                       div.con1{background:red;top:0px;left:0px;z-index:99;}

                       div.con2{background:green;top:0px;left:0px;z-index:999;}

                       div.con3{background:blue;top:0px;left:0px;text-align:right;z-index:9;}

               </style>

        </head>

        <body>

               <divclass="outer">

                       <divclass="con1">99</div>

                       <divclass="con2">999</div>

                       <divclass="con3">9</div>

               </div>

        </body>

</html>

 

以上案例:

关于CSS3中多个DIV 盒子叠加计算问题

 

div.con1{background:red;top:0px;left:0px;z-index:99;}

div.con2{background:green;top:0px;left:0px;z-index:999;}

div.con3{background:blue;top:0px;left:0px;text-align:right;z-index:9;}

可以很明白初步得出结论三个小盒子原始坐标值:

第一个盒子con1 (0,0)

第二个盒子con2 (200,0)

第三个盒子con3 (400,0)

 

【第一次变换】

为了方便辨认大盒子div.outer 内部三个小盒子div.outer div之间关系  特别更改三个小盒子横坐标,纵坐标不变,来识别三个小盒子是否折叠?则CSS样式代码变更如下:

 

div.con1{background:red;top:0px;left:0px;z-index:99;}

div.con2{background:green;top:0px;left:50px;z-index:999;}

div.con3{background:blue;top:0px;left:100px;text-align:right;z-index:9;}

可以很清晰识别三个小盒子没有发生折叠,(纵坐标原始值未变化)

可以很明白得出结论,三个小盒子变换后坐标值:

第一个盒子con1 (0,0)

第二个盒子con2 (200,50)

第三个盒子con3 (400,100)

 

【第二次变换】只更换第一个盒子纵坐标:top:50px

div.con1{background:red;top:50px;left:0px;z-index:99;}

div.con2{background:green;top:0px;left:50px;z-index:999;}

div.con3{background:blue;top:0px;left:100px;text-align:right;z-index:9;}

可以很明白得出结论,三个小盒子变换后坐标值:

第一个盒子con1 (50,0)

第二个盒子con2 (200,50)

第三个盒子con3 (400,100)

【第三次变换】只更换第二个盒子纵坐标:top:50px

div.con1{background:red;top:0px;left:0px;z-index:99;}

div.con2{background:green;top:50px;left:50px;z-index:999;}

div.con3{background:blue;top:0px;left:100px;text-align:right;z-index:9;}

可以很明白得出结论,三个小盒子变换后坐标值:

第一个盒子con1 (0,0)

第二个盒子con2 (250,50)

第三个盒子con3 (400,100)

【第四次变换】只更换第二个盒子纵坐标:top:-50px

div.con1{background:red;top:0px;left:0px;z-index:99;}

div.con2{background:green;top:-50px;left:50px;z-index:999;}

div.con3{background:blue;top:0px;left:100px;text-align:right;z-index:9;}

可以很明白得出结论,三个小盒子变换后坐标值:

第一个盒子con1 (0,0)

第二个盒子con2 (150,50)

第三个盒子con3 (400,100)

【第五次变换】只更换第三个盒子纵坐标:top:50px

div.con1{background:red;top:0px;left:0px;z-index:99;}

div.con2{background:green;top:0px;left:50px;z-index:999;}

div.con3{background:blue;top:50px;left:100px;text-align:right;z-index:9;}

可以很明白得出结论,三个小盒子变换后坐标值:

第一个盒子con1 (0,0)

第二个盒子con2 (200,50)

第三个盒子con3 (450,100)

【第六次变换】只更换第三个盒子纵坐标:top:-50px

div.con1{background:red;top:0px;left:0px;z-index:99;}

div.con2{background:green;top:0px;left:50px;z-index:999;}

div.con3{background:blue;top:-50px;left:100px;text-align:right;z-index:9;}

可以很明白得出结论,三个小盒子变换后坐标值:

第一个盒子con1 (0,0)

第二个盒子con2 (200,50)

第三个盒子con3 (350,100)

关于CSS3中多个DIV盒子叠加计算问题

故得出结论:多个DIV 盒子叠加只是在前一个盒子整体(H高度height:200px)基础上进行空间叠加,与左右平移无关;即第二个盒子原始纵坐标为第一个盒子原始纵坐标+第一个盒子高度,第三个盒子原始纵坐标为第二个盒子原始纵坐标+第二个盒子高度,依次类推!

N个DIV 盒子原始坐标:

Div1(0,0)

Div2(0+H1,0)

Div3(0+H1+H2,0)

Div4(0+H1+H2+H3,0)

……..

Divn(0+H1+H2+H3+…+Hn-1,0)

 

找到每个盒子原始坐标后,则每一个盒子又是相互独立,变换互不干扰:

例如第二盒子top:50px,为正数向下累加, 第三盒子top:-50px,为负数向反方向即向上递减, 第四盒子top:-120px, 向上递减;即可获得到各自盒子新变换坐标!

 

获得N个DIV 盒子新变换坐标:

Div1(0,0)

Div2(0+H1+50,0)

Div3(0+H1+H2-50,0)

Div4(0+H1+H2-120,0)

……..

Divn(0+H1+H2+H3+…+Hn-1,0)

 

 

IT文库 » [置顶] 关于CSS3中多个DIV 盒子叠加计算问题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址