CSS粘性定位能解决什么问题，粘性定位怎样实现-群英

上一篇：CSS隐藏元素有多少方法，特点和区别在哪下一篇：CSS控制继承有哪些通用属性值，怎样开启继承

这篇文章主要介绍“CSS粘性定位能解决什么问题，粘性定位怎样实现”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS粘性定位能解决什么问题，粘性定位怎样实现”文章能帮助大家解决问题。

最近在做项目迁移，因为技术不同，导致某些功能的问题需要手动解决；如何在居位在主体区域底部不随内容而滚动；

OK进入正体这期分享的是CSS粘性定位属性sticky来解决上面的问题

粘性定位：

粘性定位可以被认为是相对定位和固定定位的混合。是 position:sticky是css定位新增属性；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

案例：

我们先来看个案例及最终的效果

实现的代码

通过一个简单案例去带大家粗略了解粘性布局更容易更好理解，东西本身不负载但存在一些问题需要去进一步了解

问题探索及项目中的坑

如果发现sticky粘性定位失效，如何解决
解决方案：一般sticky粘性定位失效，我们需要去找他的父元素看他的父亲元素是否设置overflow，一般都以滚动条那个父元素为主

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="aside-warp">
    <div>1</div>
    <div>2</div>
    <div class="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-warp div {
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid red;
  }
  .icon {
    position: sticky;
    top: 0px;
    background-color: aquamarine;
  }
</style>

如果能解决上面的案例说明对粘性布局了解；

来说明下上面的案例的问题：为什么此时图标就无法粘性定位了，主要是因为它（子元素）不知道以那个父元素的滚动为准(现在有两个父级元素都产生了滚动)，所以我们要对一层层祖级元素检查看是否有overflow属性如果有将元素设置 overflow: visible； body {overflow: visible； }；简单理解：两个父级body 和div.main 如果同高度宽度的话，子元素就不知道到底以父元素为主，就会出现无法粘性定位的问题，所以避免这个问题我们要将其中不要定位的父元素设置{overflow: visible； }； PS：像这种案例非常常见我只是随机例举，比如像吸顶啊等等都是可以用粘性定位实现的

关于“CSS粘性定位能解决什么问题，粘性定位怎样实现”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。如果想了解更多相关内容的文章，关注我们，群英网络小编每天都会为大家更新不同的知识。