将按钮粘贴到可滚动div的右上角

Question

我有一个可滚动的div元素和一些按钮，它们应该位于div的右上方。

它已经工作了，但只适用于垂直滚动。如果我试图向右滚动，它会停留在原来的位置。

.buttonsGroup {
position: sticky;
display: inline-block;
float: right;
right: 0;
height: 0;
top: 0;
z-index: 1;
}

.jsonArea {
position: relative;
overflow: auto;
display: inline-block;
width: 400px;
height: 200px;
background-color: #eeeeee;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.1);
}

<main>
<div class="jsonArea">
<div class="buttonsGroup">
<button>Button1</button>
<button>Button2</button>
</div>

<div style="white-space:pre">
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
</div>
</div>
</main>

我在这里做错了什么？欢迎提出任何建议。非常感谢。

Answer 1

为.buttonsGroup选择器添加以下规则：

left: 0;
width: 100%;
text-align: right;

同时，删除float: right。

.buttonsGroup {
position: sticky;
display: inline-block;
/*float: right;*/
right: 0;
height: 0;
top: 0;
z-index: 1;

left: 0;
width: 100%;
text-align: right;
}

.jsonArea {
position: relative;
overflow: auto;
display: inline-block;
width: 400px;
height: 200px;
background-color: #eeeeee;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.1);
}

<main>
<div class="jsonArea">
<div class="buttonsGroup">
<button>Button1</button>
<button>Button2</button>
</div>

<div style="white-space:pre">
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE
</div>
</div>
</main>