将按钮粘贴到可滚动的右上角 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>

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

Stick buttons to the right top of an scrollable div

html

css

css-position