css 定位(相对定位与绝对定位)
可以使用 position:relative 对元素从排列顺序的当前位置进行偏移
可用position:absolute 对元素从排列顺序的当前位置或依照定位最近的祖先元素进行偏移
用position:fixed 对元素参照视窗进行偏移
浮动与清除
问题：想把一个元素从正常排列顺序中移除，并令它靠父元素的左侧或右侧显示。想把它当作块状元素来解析，并排列在父元素内边距所包围的区域里。还想让它的顶部基于原始提取位置进行排列。还想控制邻近的其他浮动元素或非浮动内容，或把它们移到自己的下面。
解决方案：
使用float:left和float:right
用float:none覆盖其他元素进行浮动定位的规
浮动元素的定位层位置块状元素之上，与正常排列中的内联内容是相邻的。左浮动是对它的右侧内容缩进，右浮动是对它的左侧内容缩进。
浮动不影响块状盒模型的定位，只影响它们的内联内容。
用clear:left把浮动元素左侧的块状元素或其他浮动元素移到它的下面
用clear:right把浮动元素右侧的块状元素或其他浮动元素移到它的下面
用clear:both把浮动元素两侧的块状元素或其他浮动元素同时移到下面
相对浮动
问题：想在不影响其他元素（包括其他浮动元素和内联内容）定位的前提下，把浮动从现在位置上偏移。你还想控制浮动元素的（浮动元素之间或与其他定位元素之间）堆叠顺序。
解决方案：用position:relative对浮动元素进行相对定位。相对浮动还保留了元素在原始浮动排列顺序中的位置，只是用left和top将它从原来的位置上做一定的偏移。相对浮动也是在定位层被解析的，它允许你用z-index控制它相对于其他浮动元素和定位元素的堆叠顺序。因为相对浮动也是对元素的一种定位方式，所以它的绝对后代可相对于它来进行定位。
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图：
层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图：
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图：
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图：
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图：
您可能感兴趣的文章：
CSS中绝对定位absolute和相对定位relative详解
浅淅css定位position:relative与absolute用法
图例详解网页制作中的绝对定位和相对定位
absolute与relative如何区分 怎么用？
css div绝对定位与固定定位实例
css 定位详解介绍带实例demo
详解网页设计中的定位与定位应用
CSS绝对定位固定定位详解
CSS样式表一席谈之绝对定位与相对定位
CSS教程—元素的定位