绝对定位，相对定位，固定定位上下左右直接用top、bottom、right、left
1、绝对定位position：absolute（浏览器动跟着动）
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="100px; height:100px; background-color:#F00; position:absolute；"></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> </body>
拉动滚动条在浏览器中跟着移动
2、相对定位position：relative移动时相对自己的位置移动，而不是根据浏览器移动
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="100px; height:100px; background-color:#000;"></div> <div style="100px; height:100px; background-color:#F00; position:relative;top:20px"></div> </body>
3、固定定位position：fixed 怎么拉动滚动条位置都不动。比如网页上的回到顶部
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="100px; height:100px; background-color:#F00; position:fixed;bottom:20px; right:20px"></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> </body>
4、分层（z-index）就像是一摞纸，每张纸放在哪层上，绝对定位、相对定位、固定定位先写哪个，哪个就会被前面的盖住，
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px;"></div> <div style="100px; height:100px; background-color:#3FF; position:relative;"></div> </body>
蓝色在红色上面设置一下z-index 换层
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px; z-index:2"></div> <div style="100px; height:100px; background-color:#3FF; position:relative;"></div> </body>
其他效果
1、半透明效果opacity:0.5; -moz-opacity:05; filter:alpa(opacity=50)透明度为50%
<body> <div style="opacity:0.5; -moz-opacity:05; filter:alpa(opacity=50);">透明区域</div> </body>
2、圆角，border-radius:50%为圆形，可以是百分数也可以是像素，小于50%是圆角
<body> <div style=" 100px; height:100px; background-color:#3F0; border-radius:50%"></div> </body
<body> <div style=" 100px; height:100px; background-color:#3F0; border-radius:20%"></div> </body>
3、阴影box-shadow: px px px #000000
<body> <div style=" 100px; height:100px; background-color:#3F0; border-radius:20%; box-shadow:10px 10px 10px #000000 "></div> </body>
float：left、right
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ float:left} </style> </head> <body> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> <div><img src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> </body>