| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <button id="scroll" type="button">Scroll to the squares</button>
- <div id="anchors">
- <div id="anchor-static" class="anchor"></div>
- <div id="anchor-relative" class="anchor"></div>
- <div id="anchor-absolute" class="anchor"></div>
- <div id="anchor-fixed" class="anchor"></div>
- <button id="attach" type="button">Attach the panels</button>
- </div>
- <div class="ck-reset_all" id="static-container"></div>
- <div class="ck-reset_all" id="relative-container"></div>
- <div class="ck-reset_all" id="absolute-container"></div>
- <div class="ck-reset_all" id="fixed-container"></div>
- <script>
- ( () => {
- /* global document, window */
- document.querySelector( '#scroll' ).addEventListener( 'click', () => {
- window.scrollTo( 900, 900 );
- } );
- document.querySelector( '#attach' ).addEventListener( 'click', () => {
- window.createPanel( 'static' );
- window.createPanel( 'relative' );
- window.createPanel( 'absolute' );
- window.createPanel( 'fixed' );
- } );
- } )();
- </script>
- <style>
- body {
- width: 10000px;
- height: 10000px;
- }
- #anchors {
- margin-top: 1000px;
- margin-left: 1000px;
- }
- .anchor {
- width: 10px;
- height: 10px;
- background: red;
- margin: 5em;
- }
- #static-container {
- margin: 5em;
- padding: 5em;
- position: static;
- }
- #relative-container {
- margin: 5em;
- padding: 5em;
- position: relative;
- top: 10em;
- left: 10em;
- }
- #absolute-container {
- margin: 5em;
- padding: 5em;
- position: absolute;
- top: 4em;
- right: 4em;
- }
- #fixed-container {
- margin: 5em;
- padding: 5em;
- position: fixed;
- right: 14em;
- top: 6em;
- }
- </style>
|