放置一个按钮，使其不会随内容滚动[重复]答案

【问题标题】：Position a button such that it won't scroll with contents [duplicate]放置一个按钮，使其不会随内容滚动[重复]
【发布时间】：2023-03-31 05:43:01
【问题描述】：

我有这个代码：

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 中回答。

【问题讨论】：

另见：Position a Div “Fixed” Vertically and “Absolute” Horizontally within a “Position:Relative” Container Div
在pre 元素周围添加一个额外的包装器，并将按钮放在pre 之外 ...?
@CBroe 添加示例

标签： javascript html css

【解决方案1】：

添加一个包装器div，使那个相对而不是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>

【讨论】：

就是那个！！！ +100 万

【解决方案2】：

试试这个

    pre[class*="language-"] {
      top: 0;
      position: relative;
      border-radius: 3px;
    }
    #copybutton {
      position: fixed;
      right: 5em;
      top: 1.5em;
      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>

【讨论】：

按钮不可见