CSS定位position定位问题

css基础知识中，定位是最重要的一项。现在整理一下定位的相关知识，留作以后复习用。
css定位机制有三种：普通流、浮动和定位。
普通流：普通流中元素框的位置由元素在HTML文档中的位置决定。块级元素从上到下依次排列，块级元素的垂直距离由垂直方向的margin计算得到。行内元素在一行之中水平放置。
浮动：浮动框可以左右移动，直到它的外边框接触到包含框边缘或其他浮动框边缘。浮动框脱离普通流。
定位：position定位

Position属性

position属性可以选择5个不同类型的定位属性：static、relative、absolute、fixed、inherit。
static
position属性的默认值，元素正常出现在文档流中。

HTML

<div class="box-set";    <div class="box">box1</div>    <div class="box">box2</div>    <div class="box">box3</div>    <div class="box">box4</div></div>

CSS

.box-set{    background-color:#eaeaea;}.box{    background-color:red;    width:48px;    height:48px;}

效果

relative
生成相对定位元素，通过使用位移属性（top、right、bottom、left）相对于正常位置进行定位。
设置了位移属性的相对定位元素，在页面中仍然属于自然流，其他元素不会占用相对元素原本在文档流中的位置，相对元素可能会于其他元素重叠。
位移属性若同时设置了“top”和“bottom”，“top”优先级较高。

HTML

<div class="box-set">    <div class="box box-1">box1</div>    <div class="box box-2">box2</div>    <div class="box box-3">box3</div>    <div class="box box-4">box4</div> </div>

CSS

.box-set{    background-color:#eaeaea;}.box{    background-color:red;    width:48px;    height:48px;    position:relative;}.box-1{    top:10px;}.box-2{    left:20px;}.box-3{    bottom:-10px;    right:10px;}

效果

absolute
绝对定位元素相对于已定位的（除static定位）最近的祖先元素进行定位，如果没有最近的祖先元素，则相对于页面主体进行定位。
绝对定位元素会脱离文档流，有可能会覆盖其他元素，可以设置z-index属性来设置元素堆叠顺序。

HTML

<div class="box-set">    <div class="box box-1">box1</div>    <div class="box box-2">box2</div>    <div class="box box-3">box3</div>    <div class="box box-4">box4</div></div>

CSS

.box-set{    background-color:#eaeaea;    position:relative;}.box{    background-color:red;    width:48px;    height:48px;    position:absolute;}.box-1{    top:5%;    left:3%;}.box-2{    top:0;    right:-10px;}.box-3{    bottom:-10px;    right:10px;}.box-4{    bottom:0;}

效果

fixed
固定定位和绝对定位类似，只是固定定位元素是相对于浏览器进行定位的，不会随滚动条滚动。

HTML

<div class="box-set">    <div class="box box-1">box1</div>    <div class="box box-2">box2</div>    <div class="box box-3">box3</div>    <div class="box box-4">box4</div></div>

CSS

.box-set{    background-color:#eaeaea;}.box{    background-color:red;    width:48px;    height:48px;    position:fixed;}.box-1{    top:5%;    left:3%;}.box-2{    top:0;    right:-10px;}.box-3{    bottom:-10px;    right:10px;}.box-4{    bottom:0;}

效果

固定页头和页脚
固定页头、页脚或者页面的一个侧边都是常见的用途，不会随着滚动条滚动。
通过设置“left”和“right”两个盒子位移，这使得“页脚”跨越了页面的整个宽度，而不需使用margin、border和padding来破坏盒模形就做了收缩自如。

HTML

<footer>Footer</footer>

CSS

footer{    background-color:chartreuse;    position:fixed;    bottom:0;    left:0;    right:0;}

效果

z-index属性
z-index属性设置元素的堆叠顺序，z-index属性值越高越靠前。
z-index属性与位移属性相同，仅能在定位元素上奏效（“relatvie”、“absolute”或者“fixed”之一）。

HTML

<div class="box-set">    <div class="box box-1">box1</div>    <div class="box box-2">box2</div>    <div class="box box-3">box3</div>    <div class="box box-4">box4</div></div>

CSS

.box-set{    background-color:#eaeaea;    position:relative;}.box{    background-color:red;    width:48px;    height:48px;    position:absolute;}.box-1{    left:10px;    top:10px;}.box-2{    top:40px;    left:40px;    z-index:3;}.box-3{    left:80px;    top:10px;    z-index:2;}.box-4{    top:40px;    left:120px;    z-index:1;}

效果
设置z-index之前

设置z-index之后