My objective is to design a comment button that appears next to the text when highlighted and remains fixed in place next to it as the page is scrolled.
I have noticed that the button only appears within the padding and not the margin. How can I adjust the positioning of the button so that it appears within the margin while maintaining its position relative to its container, ensuring that it stays aligned with the text upon scrolling?
Referencing the screenshot attached, you can observe how the button (located at the top right) is concealed by the margin but visible within the padding area.
.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;
}
}