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

我有一个div。我们称之为“ Main_Card”。 “ Main_Card”中包含一些文本并带有一个图标，OnClick会移动“ Main_Card”及其内部的所有图标（带有图标本身）。现在这是问题所在。我需要具有该图标的position: relative;（或绝对值），但是我还需要具有Main_Card的overflow-y: auto;，文本的原因在某些屏幕上可能很长，因此用户可以滚动它。

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

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

最佳答案

我想看一下代码，因为如果没有它，这个问题就很不清楚。

如果我理解正确，只需将溢出属性设置为文本容器。

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>