为什么要学定位
定位是CSS中的难点和重点，特别是后面学javascript特效时候，比如实现下拉菜单、弹框等，要盖住下面内容又不会影响下面内容，比如要超出盒子一部分，比如屏幕中有一个小弹窗飘来飘去的，再比如要放在盒子中任意位置，都必须用定位来做，一定要搞清楚。
定位类似于浮动，脱离标准流，但又不同于浮动，它可以放在任何地方。
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
1.边偏移：告诉盒子往哪儿走
2.定位模式（定位的分类）
一、静态定位(static)
所有元素的默认定位方式，网页中所有元素都默认的是静态定位，其实就是标准流的特性。
静态定位唯一的用处，就是取消定位。
例如有些网站的栏目，往下划的时候会出现，往上划到顶部的时候又消失了，栏目一会儿有定位一会儿没有定位，实现方式就是一会儿加个固定定位，一会儿用static取消固定定位。
二、相对定位(relative)--自恋型
相对定位是将元素相对于它在标准流中的位置进行定位，即每次移动的位置，是以自己的左上角为基点移动的。例如设置了margin，则以margin后的左上角位置来移动。
对元素设置相对定位后，可以通过边偏移属性来改变元素位置，但它在文档流中的位置继续占有。
<style>
.top{
height: 100px;
width: 100px;
background-color: hotpink;
}
.buttom{
height: 200px;
width: 200px;
background-color: yellow;
}
</style>
<body>
<div class="top"></div>
<div class="buttom"></div>
</body>
<style>
.top{
height: 100px;
width: 100px;
background-color: hotpink;
position: relative;
top: 100px;
left: 100px;
}
.buttom{
height: 200px;
width: 200px;
background-color: yellow;
}
</style>
<body>
<div class="top"></div>
<div class="buttom"></div>
</body>
注意：
1.相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来所占的位置，继续占有。
2.其次，每次移动的位置，是以自己的左上角为基点移动。
如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值是移动位置，让盒子到我们想要的位置上去。
三、绝对定位(absolute)--拼爹型
绝对定位不占有位置。
1.父级没有定位
若所有父元素都没有定位，或没有父亲，则以浏览器左上角为准对齐。
2.父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对）的父元素（祖先）进行定位。例如父亲没有定位，爷爷有定位，则根据爷爷进行定位。
子绝父相
一般来说，子级是绝对定位的话，父亲要用相对定位。
因为如果父亲用绝对定位，它不占文档位置，后面的紫色盒子就会盖住蓝色的盒子，并不是我们想要的效果。
网站上经常用到的类似的小箭头，都是用绝对定位做的，因为绝对定位不占文档位置。
绝对定位的盒子水平/垂直居中
普通盒子左右居中用margin:aotu即可，但对于绝对定位的就无效了。
加了定位的或浮动的盒子，margin:auto就会失效。
可以用一下方法：
1.首先left:50%，此时盒子左边对齐浏览器中线；
2.然后margin-left:-a(a为盒子宽度的一半），让盒子往右走自己宽度的一半。
四、固定定位（fixed）--认死理型
1.固定定位元素跟父亲没有任何关系，只认浏览器；
2.固定定位完全脱标，不占位置，不随着滚动条滚动。
定位模式转换
跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块元素，因此行内元素若添加了绝对定位、固定定位、浮动后，可以不用转换模式，直接给高度和宽度即可。
注意：行内块元素的高宽和内容有关系。
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
