position 是css 常用属性之一,它是css规定的元素定位属性,相对定位和固定定位会指定当前元素为块级元素。它有八个属性值: static、relative、absolute、fixed、inherit、sticky、initial,unset,其中 static、relative、absolute、fixed是css2的属性,也是最常用的,sticky、initial,unset是css3新增的,大家可以重点关注一下sticky,虽然它兼容性不好,但是却很意思。
属性值 | 描述 |
---|---|
static | 是定位元素的默认值,正常存在于文档流中,top、left、right、bottom 、z-index 不生效。 |
relative | 相对定位,top、left、right、bottom、z-index 生效,它不脱离文档流,会占用当前的位置,当top等设置时,会相对于文档流偏移,而左右上下相邻元素不影响。 |
absolute | 绝对定位,top、left、right、bottom、z-index 生效,脱 离文档流,不占用文档流空间,并且它会向上找最近的祖父position,作为它绝对定位基点,但是static这个属性absolute 不生效,如果向上查找未出现position属性,那么 absolute会将body作为基点。 |
fixed | 绝对定位元素,它脱离文档流,top、left、right、bottom 、z-index 生效,是相对于浏览器定位的,也就是说在它之上,absolute、relative等是不生效的。 |
inherit | 此属性是继承祖父级定位,祖父标签为absolute,它就会为absolute,祖父标签为relative,它就会为 relative,祖父为fixed、static等亦如此。 |
sticky | 这个属性尴尬的一批,基本浏览能兼容的寥寥无几,ie,operaMINI 全军覆没,firefox 26以上,chrome 6.1以上…但是,我们也需要知道它。它是粘贴定位,用于一些特殊场景如:固定头部元素,向上滚动超出距离不消失。指定top、left、right、bottom 其中一个阙值生值,粘贴定位才会生效,否则,它的行为等同一个相对定位。它的解释是,监听页面的srcoll 事件,当元素超过视图区块顶部、左边、右边、下边距离后,添加 fixed,反之,则去掉。注意:1.优先级:top>left>right>bottom。 2. 祖父元素必须设置 overflow: visible。 |
initial | 将属性设置回默认值,可用于所有css属性,这个很少有人用,兼容性很差,只有safire 支持 |
unset | 是inital 和inherit的结合,设置在 top、left、right、bottom 上,意思是当属性值为可继承元素,那它等同于 inherit,非可继承元素,则等同于 inital。 |
小结:其实大家都觉得有些属性平时不用,那就不用看了,不是这样的,只有真正了解了它的本质,知道了它的所有属性值,适用于哪些场景,才能游刃有余的做出适用性强的布局。