如何使某个div元素相对于父元素固定，并且不随父元素滚动

想要不随父元素滚动，我们首先想到的是使用fixed，但fixed是相对于body进行定位的，如何解决这一问题呢？

首先我们需要把需要固定的元素，放在需要相对于其固定的位置上

<div class="main">
  <div class="left">左边内容可以自己多弄点内容出现滚动条</div>
  <div class="right">
    <div class="fixed-content">
       <p>固定位置</p>
    </div>
  </div>
<div>

然后就是最重要的css

.main {
  width: 100%;
  display: flex;
  height: 200px;
  overflow-y: scroll;
}
.left {
  flex: 1;
}
.right {
  width: 200px;
}
.fixed-content {  // 重要部分
  position: fixed;
  top: 50px;
  width: 0;
  height: 0;
}
p {
  width: 200px; // 重要部分
}

然后就可以啦，自己可以去试试哦