视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
cssposition属性(absolute和fixed区别)_html/css_WEB-ITnose
2020-11-27 16:06:27 责编:小采
文档


在css3中,position的属性值有:inherit, static, relative ,absolute, fixed.

inherit 是继承父元素的position属性值,IE不支持。

static 默认值,元素出现在正常的流中,忽略 (TRBL)和z-index的值。请参照下面的例子,div1由于position的值为static,所以top,left 没有起作用.

test position static this id div 1(position is static)this is div 2

  inherit 和 static差别:在运行过程中,position 如果为static则始终保持不变,如果为inherit则可在运行过程中改变。

relative相对定位,相对于正常文档流的正常位置进行定位。如下面的例子中,一个div 相对于正常位置 偏移100px. 这里有点需要注意,positino设置relative 之后,元素仍保留未定位前的形状,它所占用的空间会保留。就是说,未定位以前,div默认是块级元素(div默认属性),定位之后依然是块级元素。

test position static  The position of this div is relative...

absolute 生成绝对定位的元素,相对于static以外的第一个父元素进行定位。如下面的例子所示,

test position static div parent div child 3 

fixed生成绝对定位的元素,相对于浏览器窗口进行定位。如下面的例子,可以滚动右边的滚动条,div 相对于窗口始终在相同的位置。其实,更恰当的例子,是做个购物车。

test position static  The position of this div is fixed.And this div will be always here.

下载本文
显示全文
专题