DIV重合 CSS让DIV堆叠 两个DIV或好几个DIV次序重合加

日期:2021-03-06 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件

让DIV重合并按要想次序重合必须CSS来完成,即CSS肯定精准定位开展完成。

重合款式必须关键CSS款式解释

1、z-index 重合次序特性
2、position:relative和position:absolute设定目标特性为可精准定位(可重合)
3、left right top bottom肯定精准定位实际部位设定

相互配合的款式

1、css width
2、css height
3、background 以便观查实际效果,大家对不一样DIV设定不一样情况色调开展差别

接下来大家为大伙儿奉上DIV按自身意向重合、叠加案例合理布局。大家新建4个DIV盒子,1个大的DIV盒子,CSS取名为“.div-relative”,3个小DIV盒子放于第1个大DIV目标盒子内,DIV取名各自为“.div-a”、“.div-b”、“.div-c”。

1、未排列、为排次序DIV堆叠重合案例

1、详细HTML源码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf⑻" />    
  5. <title>div重合 叠加案例 未排堆叠次序 www.jb51.net</title>    
  6. <style>    
  7. .div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px}    
  8. .div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px}    
  9. /* css注解表明: 情况为鲜红色 */    
  10. .div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px}    
  11. /* 情况为黄色 */    
  12. .div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px}    
  13. /* DIV情况色调为蓝色 */    
  14. </style>    
  15. </head>    
  16. <body>    
  17. <div class="div-relative">    
  18. <div class="div-a">我情况为鲜红色</div>    
  19. <div class="div-b">我情况为黄色</div>    
  20. <div class="div-c">我情况为蓝色</div>    
  21. </div>    
  22. </body>    
  23. </html>  
2、未排DIV堆叠次序 div+css案例截图



案例表明:

大家应用position完成肯定精准定位,对父级设定position:relative特性,对其子级设定position:absolute再加left或right和top或bottom完成子级在父级内随意精准定位。在初始状况下重合是按DIV编码自身次序排序,越后键入的DIV盒子其越靠前(浮在上面)。除更改源码自身div编码在html次序,大家还能够应用css z-index完成DIV层排序次序。

2、根据CSS操纵DIV重合次序

大家应用以上肯定精准定位案例编码,只必须对“.div-a”、“.div-b”、“.div-c”各自添加z-index款式便可完成随意次序排序。

拓展专业知识:

z-index的值为正整数金额值,数据越大对解决象层越浮顶层(越靠前。

以上案例默认设置次序是“.div-c”浮在最顶层(蓝色情况层)、“.div-b”浮在中层(黄色情况层)、“.div-a”排底层(鲜红色情况层)。大家接下来应用z-index款式在不更改html编码状况下完成次序颠复,“.div-b”浮在中层(黄色情况层)排列不会改变,完成“.div-a”浮在最顶层(鲜红色情况层)、“.div-c”排底层(蓝色情况层)。

1、完成按意向排序DIV堆叠重合次序详细HTML编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta charset="utf⑻" />    
  5. <title>div重合 叠加案例 排堆叠次序 www.jb51.net</title>    
  6. <style>    
  7. .div-relative{position:relative;color:#000;border:1px solid #000;width:500px;height:400px}    
  8. .div-a{ position:absolute;left:30px;top:30px;z-index:100;background:#F00;width:200px;height:100px}    
  9. /* div情况色为鲜红色 */    
  10. .div-b{ position:absolute;left:50px;top:60px;z-index:80;background:#FF0;width:400px;height:200px}    
  11. /* 情况为黄色 */    
  12. .div-c{ position:absolute;left:80px;top:80px;z-index:70;background:#00F;width:300px;height:300px}    
  13. /* 情况为蓝色 */    
  14. </style>    
  15. </head>    
  16. <body>    
  17. <div class="div-relative">    
  18. <div class="div-a">我情况为鲜红色</div>    
  19. <div class="div-b">我情况为黄色</div>    
  20. <div class="div-c">我情况为蓝色</div>    
  21. </div>    
  22. </body>    
  23. </html>   

2、div堆叠次序案例截图



完成红情况的“div-a”与蓝色情况“div-c”堆叠次序更换案例截图

大家在不更改第1个案例的HTML编码下,对“div-a”、“div-b”、“div-c”肯定精准定位执行后添加z-index完成堆叠次序更改。

3、DIV重合总结

要完成DIV重合,并更改完成DIV盒子堆叠重合次序,大家对父级应用position:relative,对子级应用position:absolute、z-index(重合次序)、left,right,top,bottom肯定精准定位非常于父级实际部位。

文中的两个演试免费下载