产品与服务 资讯 关于我们 联系我们
对于做网站开发的童鞋来说,position属性一定都是很熟悉的,在css网站制作中,position属性也是有一定地位的,下边我们就来看看对于position属性是怎样解释的?
 
在w3school中是这样说的:
 
定义和用法:position 属性规定元素的定位类型。
 
说明:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
 
position属性对应的值有
 
1、position: static;
 
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index声明)。元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
 
2、position: inherit;
 
inherit值如同其他css属性的 inherit 值,即继承父元素的position值。
 
3、position: relative;
 
相对定位,相对于自己的初始位置,不脱离文档流。也就是说元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留。 
 
3、position: absolute;
 
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。 
 
4、position: fixed;
 
fixed元素脱离正常的文档流,所以它与absolute元素很相似,同样会被周围元素忽略,支持top,bottom,left,right属性,但fixed 元素正如它的名字一样,它是固定在屏幕的某个位置,它不会随着浏览器滚动条的滚动而一起滚动。比如我们常见的回到顶部的功能,按钮一直在浏览器的左下方,不管滚动条如何滚动,该按钮都会在左下方的固定的位置,这个需求就可以使用position: fixed来完成。 
 
但需要注意的是,position: fixed是有兼容性问题的,不支持IE6、IE7、IE8。可以通过给该元素设置position: absolute并获取滚动条距离顶部高度加上某个固定高度来实现。
 
5、position: sticky;
 
很多同学会对该属性比较陌生,这是一个相对来讲比较新的属性值。sticky 的本意是粘贴,可以称之为粘性定位,但在 css 中的表现更像是吸附。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。常见的吸顶、吸底(网站的头部返回栏,底部切换栏之类)的效果用这个属性非常适合。

相关推荐: 手机WAP网站怎么理解?

    对于手机网站,有人理解为:因为手机网站一般用专门为移动网络终端开发的wap协议,所以支持wap协议的网站就是手机网站。那么,手机网站和WAP网站有什么区别吗?还是两者就是一回事?     其实,WAP只是手机网站的一种格式。将两者联系起来看就是手机wa…