前言:依稀记得刚学习前端找工作问过我一个面试题,css的position的属性有几种,我回答的是
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
还有一种 没有回答出来,
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
自此之后 我就坚定的认为 position 有四种属性。
这其实只是 css2 的position 的四种属性 也是最常用 且 兼容性最好的四种属性。
position 在css3中增加了 三种属性
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。 |
unset | 是inital 和inherit的结合,设置在 top、left、right、bottom 上,意思是当属性值为可继承元素,那它等同于 inherit,非可继承元素,则等同于 inital。 |
1.需求
很常规的一个需求,移动端的页面 分多个模块,每个模块有一个title ,在页面向上滚动到对应模块时,title固定在头部。 如图
之前实现方式是 监听页面滚动,当页面滚动到指定区域时把对应的title设置成fixed。非常的麻烦
2.实现
<body>
<style>
.title{
border-left: 5px solid blue;
padding: 3px 15px;
font-weight: 900;
position: sticky;
top: 0;
background: #fff;
}
.content{
border: 1px solid red;
height: 1000px;
}
</style>
<div>
<div class="title">这是标题1111</div>
<div class="content" >
这是模块1
</div>
<div class="title">这是标题2</div>
<div class="content">
这是模块2
</div>
</div>
</body>
一行样式就完成了 可以说是非常的银杏。
总结:复习下position用法。