定位小总结

一.css定位小介绍

css定位属性，主要是由position（定位方式）、z-index（层叠顺序）、float（浮动）、clear（清除浮动）、overflow（超出范围）等来控制。

二.position 的属性

默认值：static属性

绝对位置：absolute。

将对象从文档流拖出，使用left、right、top、bottom等属性相对于其最接近的一个父对象进行绝对定位。如果不存在这样的父对象，则依据body对象进行定位。

支持层叠样式，通过z-index属性定义。

left这些元素的值有三种表示方法：auto，长度值，百分比，auto为默认值。

比如：

position:absolute;
left:100px;
top:200px;

意思是距离顶端200像素，距离左侧100像素的位置。

fixed属性值

页面滚动，元素不随之动：fixed

fixed就是固定不动的，不随页面滚动而滚动。

比如：

position：fixed；
left：0px;
top:0px;

该元素的位置就是浏览器的最左侧，而且不随滑轮的滚动而滚动。

relative属性值

对象不可以层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

relative是相对于本身定位。

例如：

position：relative;
left：10px;
top:10px;

浮动

float（浮动）的框，可以向左或向右移动，直到它的外边缘碰到包含框或者另外一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在。
float属性值：left、right、none。依次解释为向左浮动、向右浮动、对象浮动。默认值是none。

浮动会脱离正常文档流。

清除浮动

clear可指定一个元素是否允许其他元素漂浮在它的周围

语法：clear：值；

clear值：none、left、right、both。

超出范围

当前层内超出层所能容纳的范围时，可以使用overflow提供显示方式。

语法：overflow：值；

overflow值：

层大小和内容都会显示出来：visible

只有超出层的范围时，显示滚动条：auto;

隐藏超出层范围的内容：hidden

总是显示滚动条：scroll