如图,A、B两个模块,不是父子级,并列平行级别:
如何变成下面这样,让B移到A下面,且A覆盖在B上面
解决方案:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> #father{ position:relative;/*父盒子位置要用relative*/ margin:20px auto; width:400px; height:100px; border:1px solid red; } #father #a{ position:absolute;/*子盒子位置要用absolute*/ width:100%; height:50px; background:blue; opacity:0.6; z-index:2; } #father #b{ position:absolute;/*子盒子位置要用absolute*/ width:100%; height:80px; background:#F4AF19; text-align:right; z-index:1; } </style> </head> <body> <!--按上面的CSS定位方法布局就会重叠,那个子盒子在前面用Z-INDEX 决定--> <div id="father"> <div id="a">我是A盒子</div> <div id="b">我是B盒子</div> </div> </body> </html>