在CSS中，我们是通过position定位属性来进行定位的，它有如下几个属性值。常见的属性有如下几个：
absolute（绝对定位）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。元素的位置通过 "left",
"top", "right" 以及"bottom" 属性进行规定。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
例：{ position:absolute;
left:100px;
top:150px;}
fixed（固定定位）
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定。 Fixed 定位在 IE7 和 IE8 下需要描述!DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
relative(相对定位)
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的 LEFT 位置添加 20 像素。移动相对定位元素，但它原本所占的空间不会改变。
最常见的使用方式有如下两种：
使用方法一：元素相对自身的原位置偏移某个距离，但是原本的空间依旧保留，表现为空白。
使用方法二：把一个元素设置为position: relative; 可以使该元素的子元素相对该元素绝对定位。
static（静态定位）
它是position的默认值，元素框正常生成，也就是没有定位时的正常显示。HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top,
bottom, left, right影响。
例：
div.static { position: static;
border: 4px solid #fff;}
从上文可以看出absolute/fixed都有种跟浮动同样的效果，下面我们来将他们进行比较：
absolute/fixed和float对比相同之处：元素都会脱离文本流，从普通文本中删除，但是依旧会影响布局;都会生成一个块级框，无论原来是不是块级元素。不同之处：float的包含块是最近的块级祖先元素。
采用position定位之后必须采用偏移属性定义偏移量，也就是相对包含块的偏移。在使用的时候需要注意的是：定义偏移量的元素应为position值不是static的元素。有时也需要定义width和heigth，但是可能会和偏移属性的定义冲突，因为四个偏移属性实际上已经定义了元素的大小。此时，根据width和left属性定义左右，根据top和height属性定义上下。
网友评论