在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属性定义上下。