使用绝对定位使按钮显示在容器外部

Question

我的目标是创建一个注释按钮，该按钮显示在高亮显示的文本旁边，并在滚动时保持粘性。

我发现按钮在填充内时显示出来，但在空白处不显示。如何定位按钮以使其出现在页边距内，并使其相对于其容器的顶部/左侧保持相对于滚动文本位于相同的位置。

这是屏幕截图-您可以看到该按钮（右上角）在边距中的显示处被边距隐藏了。

.grader-content-toggle {
    overflow-y: scroll;
    position: relative;
    max-height: calc(100vh - 155px);
    padding-right: 25px;
    padding-left: 25px;
}

.comment-button {
   display: inline-block;
   position: absolute;
   right: -60px;
   top: 0px;
   background: white;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.05);
   cursor: pointer;

   svg {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
   }
}

Answer 1

您向我们展示的代码很少，但是无论如何我都在开始回答，因为有足够的钱来查看问题的原因。

这里的问题是您隐藏了溢出。不幸的是，我们无法将overflow-y:scroll与overflow-x:visible混合使用。

要么：

1. 增加左侧填充或
2. 添加一个额外的包装，因此按钮位于元素之外，且不可见溢出。

Answer 2

将.comment-button position属性设置为固定的i.s.o。绝对