1.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <button id="scroll" type="button">Scroll to the squares</button>
  2. <div id="anchors">
  3. <div id="anchor-static" class="anchor"></div>
  4. <div id="anchor-relative" class="anchor"></div>
  5. <div id="anchor-absolute" class="anchor"></div>
  6. <div id="anchor-fixed" class="anchor"></div>
  7. <button id="attach" type="button">Attach the panels</button>
  8. </div>
  9. <div class="ck-reset_all" id="static-container"></div>
  10. <div class="ck-reset_all" id="relative-container"></div>
  11. <div class="ck-reset_all" id="absolute-container"></div>
  12. <div class="ck-reset_all" id="fixed-container"></div>
  13. <script>
  14. ( () => {
  15. /* global document, window */
  16. document.querySelector( '#scroll' ).addEventListener( 'click', () => {
  17. window.scrollTo( 900, 900 );
  18. } );
  19. document.querySelector( '#attach' ).addEventListener( 'click', () => {
  20. window.createPanel( 'static' );
  21. window.createPanel( 'relative' );
  22. window.createPanel( 'absolute' );
  23. window.createPanel( 'fixed' );
  24. } );
  25. } )();
  26. </script>
  27. <style>
  28. body {
  29. width: 10000px;
  30. height: 10000px;
  31. }
  32. #anchors {
  33. margin-top: 1000px;
  34. margin-left: 1000px;
  35. }
  36. .anchor {
  37. width: 10px;
  38. height: 10px;
  39. background: red;
  40. margin: 5em;
  41. }
  42. #static-container {
  43. margin: 5em;
  44. padding: 5em;
  45. position: static;
  46. }
  47. #relative-container {
  48. margin: 5em;
  49. padding: 5em;
  50. position: relative;
  51. top: 10em;
  52. left: 10em;
  53. }
  54. #absolute-container {
  55. margin: 5em;
  56. padding: 5em;
  57. position: absolute;
  58. top: 4em;
  59. right: 4em;
  60. }
  61. #fixed-container {
  62. margin: 5em;
  63. padding: 5em;
  64. position: fixed;
  65. right: 14em;
  66. top: 6em;
  67. }
  68. </style>