1:static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性
2:relative相对于默认位置(即static时的位置)进行偏移,元素并不脱离文档流原本的位置会被保留,其他的元素位置不会受到影响 。
3: absolute表示,
1:相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。
2:如果并没有设置了position属性的祖先元素,则此时相对于body进行定位 将会拖标 之前所在的位置不保留 脱离标志文档流 参考首次看到屏幕的位置 。
4: fixed表示,相对于视口浏览器窗进行偏移 这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样。
5:position:sticky,粘性属性,
效果是一个吸顶效果,可以说是相对定位relative和固定定位fixed的结合;
它主要用在对scroll事件的监听上;
简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时
(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。
案列:
- 锐客网 .container {
display: flex;
}.right {
border: 1px solid red;
width: 100%;
margin-top: 40px;
overflow: scroll;
height: 400px;
}nav {
position: sticky;
top: 0px;
}顶部
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
滚一个
到底啦!
【css|css定位新增粘性属性ticky 以及其他的定位】
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少(今天见识到跳槽天花板!!)