css样式元素浮动并置顶，position：sticky案例演⽰css样式元素浮动并置顶， position: sticky 案例演⽰
⼀、前⾔❀
吐⾎啊，终于让我实现了 ，我很想传⼀个效果动图， 但是传不了哇，亲们！就看看我的截图吧 。
前端框架⽤的是 uni-app，不过呢，如果你掌握了原理，⽤什么框架差不多。
如果⼤家遇到其他问题，欢迎⼤家评论区向我扔 — 就是扔问题！
如果有更好的⽅式解决，或者官⽅出了好的⽅式或者属性，拜托 评论区告诉我哇
⽬标：
左滑，最左侧绿⾊内容，黏贴到左侧侧边栏，⽩⾊内容依旧可以滑动；
上滑，最上侧绿⾊内容，黏贴到顶部，下⾯内容依旧可以滑动；
⼆、样例展⽰❀
三、上代码❀
test.vue 这个代码，其实就是先简单布局下
如果你不知道less⽂件是什么宝，别急，它就是按照布局的层级，把样式包在⾥⾯，⽅便查和管理的，按照正常css 去写，完全ok 怎么个 法，就是你把⾥⾯的层级拿出来就可以了 ，就是你的css test.less <
template >    <div id ="main-wrapper ">
<div class ="table ">
<div class ="thead ">
<div class ="tr ">
<div class ="th td2" >标</div >
<div class ="th " >我</div >
<div class ="th " >想</div >
<div class ="th " >要</div >
<div class ="th " >浮</div >
<div class ="th " >动</div >
<div class ="th " >固</div >
<div class ="th " >定</div >
<div class ="th " >上</div >
<div class ="th " >部</div >
</div >
</div >
<div class ="tbody ">
<div class ="tr " v-for =" (item,index) in 15">
<div class ="th " >左</div >
<div class ="td " >我</div >
<div class ="td " >想</div >
<div class ="td " >要</div >
<div class ="td " >浮</div >
<div class ="td " >动</div >
<div class ="td " >固</div >
<div class ="td " >定</div >
html的flex布局<div class ="td " >左</div >
<div class ="td " >部</div >
</div >
</div >
</div >
</div >
</template >
<script >
import  './style/test.less'
export  default  {
name : "test",
}
</script >
#main-wrapper  {
width : 100%;
height : 100%;
display : flex ;
justify-content : center ;
align-items : center ;
border : 2rpx solid blue ;
.table {
width : 600rpx ;
height : 600rpx ;
border : red solid 1rpx ;
overflow : auto ;
position : relative ;
.
thead {
border : blue solid 1rpx ;
四、遇到的问题❀1.粘性布局不管⽤，position: sticky;
border : blue solid 1rpx ;
position : sticky ; //粘性的关键
top : 0rpx ;    //距离顶部0rpx 的 时候粘帖住不动
z-index : 999; //层级根据⾃⼰情景调整
.tr {
width : 100%;
display : flex ;
justify-content : flex-start ;
.td2{
position : sticky ;  //粘性的关键 不论上下滑 还是左右滑 都不动
left : 0rpx ;
top : 0rpx ;
background-color : black ;
color : whitesmoke ;
}
.th {
width : 100rpx ;
height : 60rpx ;
border : white solid 1rpx ;
background-color : #4cd964;
flex-shrink :0;  //⽗元素宽度不够的情况下是⾃动收缩不？0表⽰不⾃动收缩，1表⽰⾃动收缩
}
}
}
.
tbody {
border : deeppink solid 1rpx ;
.tr {
width : 100%;
display : flex ;
justify-content : flex-start ;
.th {
width : 100rpx ;
height : 60rpx ;
border : white solid 1rpx ;
background-color : #4cd964;
flex-shrink :0;  //⽗元素宽度不够的情况下是⾃动收缩不？0表⽰不⾃动收缩，1表⽰⾃动收缩
position : sticky ;  //粘性的关键
left : 0rpx ;
}
.td {
width : 100rpx ;
height : 60rpx ;
border : white solid 1rpx ;
flex-shrink :0;  //⽗元素宽度不够的情况下是⾃动收缩不？0表⽰不⾃动收缩，1表⽰⾃动收缩
}
}
}
}
}
解答：我当时是给左边（tbody）设置了 overflow: auto;，我把它去掉了就可以了，你可以仔细看看，我的⾥⾯只有最外层（table）设置了这个属性。
2. ⽤了flex布局之后，⾥⾯的⼩div（th）宽度根据外框的div（tr）宽度，变形了，就是th宽度挤⼩了。
解答：感谢度娘哇！在⼦元素设置 " flex-shrink:0; " 这个属性，⽗元素宽度不够的情况下是⾃动收缩不？0表⽰不⾃动收缩，1表⽰⾃动收缩
3. 在上下滑动，左右滑动，可能你会发现，该被挡住的在最上层
解答： z-index ，对，就是⽤这个属性，具体设置在哪⾥，设置多少，根据你的情景来，年轻⼈，多试⼏次，成功就差你那临门⼀脚
五、总结
本来想⼀步⼀步，写代码分析，然后发现，总共能没两句话，如果你这样理解不了，我建议，伸出你的双⼿，打⼀遍，它就听话了（你⼤概就能理解了），不要直接抄着打，带逻辑的打【先页⾯基础布局写好，然后再思考哪⾥粘性，然后你会遇到问题，根据问题⼀个⼀个解决，你就是王者五星】
1.sticky不会触发BFC，
2.z-index⽆效，
3.当⽗元素的height：100%时，页⾯滑动到⼀定⾼度之后sticky属性会失效。
4.⽗元素不能有overflow:hidden或者overflow:auto属性。
5.⽗元素⾼度不能低于sticky⾼度，必须指定top、bottom、left、right4个值之⼀。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。