深入了解html5中的position-
static,relative,absolute,fixed。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定,显示层级通过z-index控制。
static:静态定位。要是你没有设定position属性,那么缺省就是static。top,left,bottom,right等属性,在static的状况下是无效的,要运用这些属性,必需把position设定为其他三个值之一。
relative:relative
元素遵循正常的文档流,所以四周元素不会忽略它的存在,relative
元素一样支撑 top,bottom,left,right
等属性。当我们运用 top,bottom,left,right
等属性对 relative
元素进行相对定位时的结果有点相似于 margin
属性达到的结果,但是区别在于, relative
元素四周的元素将会忽略 relative
元素的挪移
# p { background:#ccc; width:200px; height:200px; position:relative; left:200px; top:200px }
absolute:absolute
元素将会离开正常的文档流,所以 其四周的元素将会忽略它的存在。犹如 absolute
元素的 display
属性被设为了 none
同样。此时,我们可以运用 top,bottom,left,right
等属性对 absolute
元素进行绝对定位。个别状况下定义两个属性,top 或 bottom,left 或 right
。
# p { background:#ccc; width:200px; height:200px; position:absolute; left:200px; top:200px }
fixed:牢固定位。元素将被设定在阅读器上一个牢固位置上,不会随其他元素滚动。形象点说,高低拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支撑此属性。
第一,fixed
元素定位与它的父元素无任何关系,它永远是相对最外层的 window
进行定位的。
第二,fixed
元素正如它的名字同样,它是牢固在屏幕的某个位置,它不会由于屏幕的滚动而消散。
# p { background:#ccc; width:200px; height:200px; position:fixed; left:200px; top:200px }
position属性在CSS布局中是至关重要的,真正的理解了position属性会对以后学习p加CSS有很大的帮忙
以上就是深入了解html5中的position的细致内容,更多请关注 百分百源码网 其它相干文章!