javascript - 放置按钮，使其不会随内容滚动

Question

这个问题已经有答案了:

CSS: fixed position on x-axis but not y? (17 个回答)

已关闭 3 年前。

我有这个代码:

pre[class*="language-"] {
  top: 0;
  position: relative;
  border-radius: 3px;
}

#copybutton {
  position: absolute;
  right: 1em;
  top: 1em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  border: 0px transparent;
  font-size: 0.725rem;
  padding: 3px;
  border-radius: 5px;
  background-color: #ebebeb;
  transition: background-color 0.25s ease-in-out;
}

<link href="https://prismjs.com/themes/prism.css" rel="stylesheet">
<script src="https://prismjs.com/prism.js"></script>
<pre class="language-js">
  <button id="copybutton">Copy</button>
  <code>const name = "" //a really really really really really really really really really really really really really really really really long </code>
</pre>

我想定位按钮，以便当用户水平滚动代码时，按钮不应移动到其位置。但是当用户滚动页面(而不是代码)时，它应该移动。 CSS 和 JS 答案值得赞赏。请不要用 jQuery 回答。

Answer 1

添加包装器 div ，使 that 相对，而不是 pre本身，并将按钮从 pre 中取出.

.code-display-wrapper {
  position: relative;
}

pre[class*="language-"] {
  border-radius: 3px;
}

#copybutton {
  position: absolute;
  right: 1em;
  top: 1em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  border: 0px transparent;
  font-size: 0.725rem;
  padding: 3px;
  border-radius: 5px;
  background-color: #ebebeb;
  transition: background-color 0.25s ease-in-out;
}

<link href="https://prismjs.com/themes/prism.css" rel="stylesheet">
<script src="https://prismjs.com/prism.js"></script>

foo<br>foo<br>foo<br>foo<br>

<div class="code-display-wrapper">
  <button id="copybutton">Copy</button>
  <pre class="language-js">
    <code>const name = "" //a really really really really really really really really really really really really really really really really long </code>
  </pre>
</div>

foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>