1.流/静态定位:默认值 position:static 不能指定位置
2.浮动定位: float:left/right, 不能严格指定位置
3.相对定位:position:relative; 使用left/top/right/bottom进行定位
任占有页面空间;以“其自己作静态定位点”为定位原点;
4.绝对定位:position:absolute; 使用left/top/right/bottom进行定位
不占用页面空间;以“最近的已定位的祖先元素的padding起点”为定位原点,且随着页面的内容滚动而滚动。
5.固定定位:position:fixed;使用left/top/right/bottom进行定位。
不占用页面空间;以body为定位原点。且不随着页面的内容滚动而滚动。
6.clear 属性:定义了元素的哪边上不允许出现浮动元素;具有以下属性
left:在左侧不允许浮动元素;
right:在右侧不允许浮动元素;
both: 在左右两侧均不允许浮动元素;
none:默认值;允许浮动元素出现在两侧;
示例:
<html lang="en"> <head> <meta charset="UTF-8"> <title>浮动案例</title> <style> .lf{ width:100px; height:100px; background-color:red; float:left; } .rt{ width:100px; height:100px; background-color:green; float:right; } .ab{ width:300px; height:100px; position:absolute; left:150px; top:150px; background-color:blue; } .fx{ width:10px; height:100%; background-color:blueviolet; position:fixed; right:10px; } .cl{ width:150px; height:150px; float:left; background-color:pink; clear:both; } </style> </head> <body> <div class="lf">我是左边的盒子</div> <div class="rt">我是右边的盒子</div> <div class="ab">我绝对定位到左右盒子中间</div> <div class="fx">我固定到屏幕右侧</div> <div class="cl">我先右浮动在清除浮动</div> </body> </html>