网页定位（position）
position属性
- static：默认值，没有定位
- relative：相对定位,相对于自己原来的位置进行偏移
- absolute：绝对定位，是以它最近一个已经定位的祖先元素为基准进行偏移（若父元素没有定位，则根据浏览器窗口定位）
- fixed：固定定位，不会随着鼠标的滚动而滚动，定位基准是浏览器窗口
偏移量：
- top：顶端偏移量，相对于其父标签上边线的距离
- buttom：底部偏移量，相对于其父标签下边线的距离
- left：左侧偏移量，相对于其父标签左边线的距离
- right：右侧偏移量，相对于其父标签右边线的距离
这里主要讲解相对定位和绝对定位
相对定位特性
1.对盒子设置相对定位后， 脱离文档流，但是它在标准文档流中的位置仍然保存。
2.设置了相对定位的网页元素无论在标准文档流还是在浮动时，都不会对它的父级元素和相邻元素有任何影响，只针对自身原来的位置移动
3.层级提高，可以把标准文档流中的元素及浮动元素盖在下边。
绝对定位特性
1.使用了绝对定位的元素，以它最近一个已经定位的祖先元素为基准进行偏移，如果没有已经定位的祖先元素，就会一直往上级找，要是祖先元素都没有定位的话，就会以浏览器窗口为基准进行定位。
2.绝对定位的元素从标准文档流中脱离，它们对其他元素的定位不会造成影响。
父相子绝：
子元素若要用绝对定位，父级就要用相对定位
<style type="text/css">
.box1{
position: absolute ;
width: 400px;
height: 300px;
background: pink;
left: 100px;
top: 50px;
}
.box2{
position: absolute;
width: 200px;
height: 200px;
background: #000;
left: 100px;
top: 50px;
}
.box3{
width: 300px;
height: 200px;
background: greenyellow;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"> </div>
<body>
粉色盒子使用绝对定位后：
前面说过：绝对定位脱离标准流时在原文档流中的位置是不存在的，在网页布局中，若是给父元素设置绝对定位，会导致该盒子下面的兄弟盒子往空位置跑，会导致整个网页的布局紊乱。
粉色盒子使用相对定位之后
父元素用相对定位后，脱离文档流之后的原位置仍然占有，不会影响网页的布局。
【使用场景】
在做京东这个登录界面时，基本上都是使用position定位，用完后发现不仅对大盒子定位好用，对于小盒子定位依然好用。
【注意】
定位和浮动元素不同，浮动只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流的所有内容。
【总结】
使用position属性定位网页元素
了解相对定位和绝对定位，掌握它们的主要特性。
为什么使用父相子绝，父相子绝的好处。
5042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
