Position a button such that it won't scroll with contents

Question

I have this code:

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>

I want to position the button such that when the user scrolls the code horizontally, the button should not move prom its place. But when the user scrolls the page (not the code) it should move. CSS and JS answers appreciated. Please don't answer in jQuery.

Also see: [Position a Div “Fixed” Vertically and “Absolute” Horizontally within a “Position:Relative” Container Div](https://stackoverflow.com/questions/8327093/position-a-div-fixed-vertically-and-absolute-horizontally-within-a-position) — Harun Yilmaz, Mar 20 '20 at 09:29
Add an additional wrapper around the `pre` element, and put the button _outside_ of the `pre` …? — CBroe, Mar 20 '20 at 09:30

CBroe · Accepted Answer · 2020-03-20T09:38:29.193

Add a wrapper div, make that relative instead of the pre itself, and take the button out of 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>

Harshith J Poojary · Answer 2 · 2020-03-20T09:39:25.470

Try this one

    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>

Position a button such that it won't scroll with contents

2 Answers2