效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Css Div浮动叠加层效果</title> <style type="text/css"> body { margin : 0; padding : 0; font-size:12px; } #wrap { position : relative; width : 900px; margin : 30px auto; background : #ddd; } #header { float : left; width : 900px; height : 150px; background : url(banner.jpg) no-repeat 50% 10px; } #main { float : left; width : 590px; height : 380px; margin : 10px 0 20px 10px; border : 1px solid #999; background : #fff; } #sider { float : right; position : absolute; width : 260px; height : 560px; top : -20px; right : 18px; border : 2px solid #03c; background-color: #F2F2F2; } .clear { clear : both; } </style> </head> <body> <div id="wrap"> <div id="header">头部层 <a href="#">头部层</a></div> <div id="main">主题层<br /><a href="#">头部层</a></div> <div id="sider">叠加层<br /><a href="#">头部层</a></div> <div class="clear"></div> </div> </body> </html>