如圖,A、B兩個模塊,不是父子級,並列平行級別:
如何變成下面這樣,讓B移到A下面,且A覆蓋在B上面css
解決方案:html
<!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>