javascript - 对象固定在 div 中，但相对于 JS 脚本

Question

我有一个分区。我们称它为“Main_Card”。 “Main_Card”里面有一些文本和一个图标，OnClick 移动这个“Main_Card”和它里面的所有东西都有图标本身。现在问题来了。我需要有这个图标的 position: relative; (或绝对)，但我还需要有 Main_Card 的 overflow-y: auto;，因为文本可能很长一些屏幕，以便用户可以滚动它。

问题来了。当必须滚动 Main_Card 的内容时，它会正确滚动文本，但也会滚动该图标。但是我无法设置图标的 position: fixed;，因为它也固定到整个页面，而不仅仅是在 Main_Card 中。

我能以某种方式将图标设置为“不可滚动”吗？谢谢，祝你有美好的一天!

Answer 1

我想看看代码，因为没有它问题就不清楚了。

如果我没理解错的话，给文本容器设置overflow属性即可。

body, html {
  height: 100%
}
.card {
  position: relative;
  background: orange;
  width: 200px;
  height: 100%;
  
}

.card-text {
  overflow-y: auto;
  height: 100%;
}

.card-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: green;
  color: white;
}

<div class="card">
  <div class="card-icon">
   </div>
  <p class="card-text">
    Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
     Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
     Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text.
    
  </p>
</div>