粘性定位：粘性定位可以被认为是相对定位和固定定位的混合。是position:sticky是css定位新增属性；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置 案例：我们先来...
背景最近在做项目迁移，因为技术不同，导致某些功能的问题需要手动解决；如何在居位在主体区域底部不随内容而滚动；OK进入正体这期分享的是CSS粘性定位属性sticky来解决上面的问题
粘性定位：粘性定位可以被认为是相对定位和固定定位的混合。是position:sticky是css定位新增属性；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置
案例：我们先来看个案例及最终的效果
`
实现的代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><divclass="aside-warp"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><divclass="icon">图标</div></div></body></html><style>body{display:flex;justify-content:center;}.aside-warp{margin-top:50px;height:500px;width:300px;background-color:aliceblue;overflow:auto;}.aside-warpdiv{height:80px;line-height:80px;text-align:center;border:1pxsolidred;}.icon{position:sticky;bottom:0px;background-color:aquamarine;}</style>
通过一个简单案例去带大家粗略了解粘性布局更容易更好理解，东西本身不负载但存在一些问题需要去进一步了解
问题探索及项目中的坑[]如果发现sticky粘性定位失效，如何解决解决方案：一般sticky粘性定位失效，我们需要去找他的父元素看他的父亲元素是否设置overflow，一般都以滚动条那个父元素为主
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><divclass="aside-warp"><div>1</div><div>2</div><divclass="icon">图标</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div></div></body></html><style>body{height:2000px;overflow:auto;}.aside-warp{margin-top:50px;height:700px;width:500px;background-color:aliceblue;overflow:hidden;//这里是模仿没有滚动条的效果}.aside-warpdiv{height:80px;line-height:80px;text-align:center;border:1pxsolidred;}.icon{position:sticky;top:0px;background-color:aquamarine;}</style>
如果能解决上面的案例说明对粘性布局了解；
来说明下上面的案例的问题：为什么此时图标就无法粘性定位了，主要是因为它（子元素）不知道以那个父元素的滚动为准(现在有两个父级元素都产生了滚动)，所以我们要对一层层祖级元素检查看是否有overflow属性如果有将元素设置?overflow:visible；body{overflow:visible；}；简单理解：两个父级body和div.main如果同高度宽度的话，子元素就不知道到底以父元素为主，就会出现无法粘性定位的问题，所以避免这个问题我们要将其中不要定位的父元素设置{overflow:visible；}；PS：像这种案例非常常见我只是随机例举，比如像吸顶啊等等都是可以用粘性定位实现的
结束语希望大家一键三连多多支持～
原文：
https://juejin.cn/post/70998475019051335762024-09-04
