定位网页元素

《定位网页元素》

一、网页的定位机制
1.网页中的三种定位机制
a、标准文档流
b、浮动float
c、绝对定位
2.仅用浮动和盒子模型，无法实现特定情况下的复杂定位
a、图片右上角的关闭按钮效果
b、固定在右下角的回顶部
c、鼠标移上去的下拉效果
3.position属性实现元素的定位（position：定位，位置）
a、static 默认值，没有定位，即按照标准文档流排布
b、relative相对定位
c、absolute绝对定位
d、fixed固定定位

二、fixed定位
1.fixed：固定
2.以浏览器窗口为基准进行定位，滚动文档页面的时候，依然保持对象位置不变
3.通过position：fixed属性设置
4.设置为fixed定位后，即脱离了标准文档流，对其他页面元素将不再影响
5.参照浏览器窗口，通过坐标来进行定位：
left、right、top、bottom
6.坐标的值：
a、可以是具体的像素
b、也可以是百分比（这里是相对于浏览器）
c、以上两个值都可正可负，负即为反方向
7.案例：
a、定位在右下角
b、定位在顶部工具栏占满整行
c、定位在底部工具栏占满整行
8.如何让元素水平垂直都居中
a、设置宽度
b、left:50%
c、margin-left设置为负数，且为宽的一半
transform:translate(-50%,-50%);指的是图片向左移动自身宽度的50%,向上移动自身高度的50%。
transform:transl