CSS系列2-定位1：绝对定位VS相对定位

定位

基本思想：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS定位机制：普通流、浮动和绝对定位

在没有专门指定的情况下，所有的框都是处在普通流的定位中。普通流的元素位置由元素在(X)HTML中的位置决定。块级元素从上到下一个接一个地排列，框之间的距离由框垂直方向的外边距控制。行内元素在一行中水平布置，可以通过水平内边距、边框和外边距调整间距，但垂直内边距、边框和外边距不影响行内框的高度。一行形成的水平框称为行框，它的高度总是足以容纳它包含的所有行内框，设置行高可以增加这个框的高度。

用position属性可以规定元素的定位类型。

position:static

没有指定的情况下，元素position默认值为static，元素框正常生成，块级元素生成一个矩形框作为文档流的一部分；行内元素会创建一个或多个行框置于其父元素中。

                div{width: 200px;height:30px;line-height:20px;margin: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;border:3px solid grey;}        <div style="background-color:yellow">这是块1</div><div style="background-color:red">这是块2</div><div style="background-color:blue">这是块3</div><div style="background-color:gray">这是块4</div><div style="background-color:green">这是块5</div>

position:relative

元素相对于在正常流中的默认位置偏离某个距离，保留未定位前的形状，原本所占的空间仍然保留。

                div{width: 200px;height:30px;line-height:20px;margin: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;border:3px solid grey;}.relative{position: relative;left:20px;height: 30px;}        <div style="background-color:yellow">这是块1</div><div class="relative" style="background-color:red">这是块2,positon:relative</div><div style="background-color:blue">这是块3</div><div class="relative" style="background-color:gray">这是块4,positon:relative</div><div style="background-color:green">这是块5</div>

  

position:absolute

元素框从文档流完全删除不占据空间，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就像不曾存在一样。不论原来是何种类型，定位后都生成一个块级框。

         .absolute{position: absolute;left:20px;height: 30px;}        <div style="background-color:yellow">这是块1</div><div class="relative" style="background-color:red">这是块2,positon:relative</div><div style="background-color:blue">这是块3</div><div class="absolute" style="background-color:gray">这是块4,positon:basolute,没有设置z-index</div><div style="background-color:green">这是块5</div>

当出现覆盖情况时会用到z-index属性，默认属性值为0，属性值越高拥有越高的优先级。

修改块4的z-index属性为-2

行内元素也可以设置

         span{width: 200px;height:30px;line-height:20px;margin: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;border:3px solid white;background-color: green;}<span style="background-color:yellow">这是块1</span><span class="relative" style="background-color:red">这是块2,positon:relative,z-index: -5;</span><span style="background-color:blue">这是块3</span><span class="absolute" style="background-color:gray">这是块4,positon:basolute,z-index: -2;</span><span style="background-color:green">这是块5</span>

position:fixed

fixed可以看作是absolute的子模块，它的包含块是视窗本身，相对于浏览器窗口进行定位。

值描述absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。

关于定位大概就是这么多。我一般都是使用绝对定位，然后在父元素上用相对定位。至于fixed嘛，就用给漂浮的元素啦~