position: sticky 左右布局详解（防坑指南）

废话不多说，sticky是用来出来什么问题的。上了一张图，效果摆在这。注意看右边的效果

图片.gif

没错，你可以简单的理解为 fixed 是相对浏览器的浏览器窗口的固顶定位，而sticky是相对父元素的一种固顶定位方式。

关于网上已经很多 sticky 的相关“简单教程”,这种教程，但多数都是直接一个 div 占满一行的，也就是直接一行置顶，可能出自与聚划算某个版本的一个效果吧。

image.png

关于简单使用方法大家可以出这个连接查看www.cnblogs.com/coco1s/p/64…

这里的这个说法是错误的。

image.png

如果真像作者说的那种可以的话，这了的位置就应该不会显示在这个位置。经过我的实验，其实也就只有 top 和 left 可使用。

回到正题，图中一中的效果，详细大部分人，都会想到使用 float:left 来做左右布局，但是你用了float:left左右布局后会破坏了父元素的高度高度，导致sticky 失效，如果你使用overflow: hidden; 会让父元素解决了高度问题，但是依然失去效果。overflow: hidden;已经失去了滚动效果。

在这里我推荐使用 flex 的布局方式，这样你就可以 top left bttom right 都可以使用到。

index.html

<div class="container">
  <div class="item pirate">
    <img src="/images/pirate.svg" width="100" alt="Item 1">
  </div>
  <div class="item police">
    <img src="/images/police.svg" width="100" alt="Item 2">
  </div>
  <div class="item cowboy">
    <img src="/images/cowboy.svg" width="100" alt="Item 3">
  </div>
  <div class="item doctor">
    <img src="/images/doctor.svg" width="100" alt="Item 4">
  </div>
</div>

index.css

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;

  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.pirate {
  position: -webkit-sticky;
  position: sticky;
  top: 4rem;
}

.police {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.doctor {
  position: -webkit-sticky;
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

image.png

我们将父元素设置为flex,并且设置justify-content: space-around; align-items: flex-start; 让子元素从左到右顺序排列

那个元素需要固定到哪里自己顺序排序
如果想这个元素是底部开始固定定位的话
将其div 设置为 align-self: flex-end;即可

享用 flex 和 sticky 达到图一效果