css定位

css定位

定位模式：在css中，position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position：属性值；}

position属性值有5种，分别是静态定位，相对定位，绝对定位，固定定位和粘性定位

属性值	描述
static（静态定位）	正常显示，和不设置的效果一样
absolute（绝对定位）	以已定位父元素的位置为参照物，脱离文档流，不占据空间
fixed（固定定位）	以浏览器的窗口为参照物；不论窗口滚动与否，元素都会留在那个位置
relative（相对定位）	以自身默认的位置为参照物；不会破坏正常的布局流；占据空间
stick（粘性定位）	当元素在屏幕内，表现为relative；滚出显示器屏幕时，表现为fixed

偏移属性

定位模式仅仅定义了以哪种方式进行定位，并不能确定元素的具体位置，在css中，通过偏移属性来定义位置，其取值为数值或百分比。

偏移属性	描述
top	顶端偏移量，定义元素相对于其参照物的上边线的距离
bottom	底部偏移量，定义元素相对于其参照物的下边线的距离
left	左侧偏移量，定义元素相对于其参照物的左边线的距离
right	右侧偏移量，定义元素相对于其参照物的右边线的距离

注意： 在静态定位下，left，top属性不起作用

包含块

包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

定位元素的层次关系
z-index：value 默认value为auto
可以为负数，在没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上

元素在浏览器窗口居中的方法

让一个元素始终在窗口水平、垂直位置居中：
div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2、
div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}

锚点

命名锚点链接的应用：

命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记   id="命名锚记名">    </标记>

2)命名锚记连接
语法：<a href="#命名锚记名称"></a>