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

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

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

Answer 2

您只向我们展示了很少的代码，但我还是要开始回答，因为有足够的代码可以看出问题的原因。

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

或者：

增加左边距或
添加一个额外的包装器，使按钮位于元素之外，溢出不可见。

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

Make button show up outside of container using absolute positioning

css

css-position