Css Div浮动叠加层效果

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
5. <title>Css Div浮动叠加层效果 www.cxybl.com</title> 
6. <style type="text/css"> 
7.  
8. body { 
9.     margin : 0; 
10.     padding : 0; 
11.     font-size:12px; 
12. } 
13. #wrap { 
14.     position : relative; 
15.     width : 900px; 
16.     margin : 30px auto; 
17.     background : #ddd; 
18. } 
19. #header { 
20.     float : left; 
21.     width : 900px; 
22.     height : 150px; 
23.     background : url(banner.jpg) no-repeat 50% 10px; 
24. } 
25. #main { 
26.     float : left; 
27.     width : 590px; 
28.     height : 380px; 
29.     margin : 10px 0 20px 10px; 
30.     border : 1px solid #999; 
31.     background : #fff; 
32. } 
33. #sider { 
34.     float : right; 
35.     position : absolute; 
36.     width : 260px; 
37.     height : 560px; 
38.     top : -20px; 
39.     right : 18px; 
40.     border : 2px solid #03c; 
41.     background-color: #F2F2F2; 
42. } 
43. .clear { 
44.     clear : both; 
45. } 
46. </style> 
47. </head> 
48.  
49. <body> 
50. <div id="wrap"> 
51.     <div id="header">头部层 <a href="http://www.cxybl.com">http://www.cxybl.com</a></div> 
52.     <div id="main">主题层<br /><a href="http://www.cxybl.com">http://www.cxybl.com</a></div> 
53.     <div id="sider">叠加层<br /><a href="http://www.cxybl.com">http://www.cxybl.com</a></div> 
54.     <div class="clear"></div> 
55. </div> 
56. </body> 
57. </html> 

本文链接http://www.cxybl.com/html/wyzz/CSS/20120613/29958.html

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索http
， background
， width
， px
， www
， 叠加
div浮动层
css div浮动在最上层、css 浮动div固定位置、css div 浮动、css div浮动在顶层、css div 叠加，以便于您获取更多的相关知识。