Sin descripción

relative-html.html 825B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE html> <title>Basic Visual Test</title>
  2. <style>
  3. @import '/reset.css';
  4. html {
  5. position: relative;
  6. }
  7. body {
  8. height: 2000px;
  9. }
  10. #reference {
  11. position: absolute;
  12. top: 150px;
  13. left: 150px;
  14. width: 200px;
  15. height: 200px;
  16. background-color: red;
  17. box-shadow: inset 0 0 0 1px black;
  18. }
  19. #popper {
  20. width: 100px;
  21. height: 100px;
  22. background-color: rebeccapurple;
  23. box-shadow: inset 0 0 0 1px black;
  24. }
  25. </style>
  26. <div id="reference">Reference Box</div>
  27. <div id="popper">Popper Box</div>
  28. <script type="module">
  29. import { createPopper } from './dist/popper.js';
  30. const reference = document.querySelector('#reference');
  31. const popper = document.querySelector('#popper');
  32. window.instance = createPopper(reference, popper, {
  33. placement: 'top',
  34. });
  35. </script>