A Pen by AdinanCenci on CodePen.
Last active
December 28, 2019 12:31
-
-
Save adinan-cenci/7bf6db36dc136b0f5bc88be6d63283a4 to your computer and use it in GitHub Desktop.
Get an element's position
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0" /> | |
| <title>Document</title> | |
| </head> | |
| <body class="static"> | |
| <div class="example example1"> | |
| <div class="example example2"> | |
| <div class="example example3"> | |
| <div class="example example4"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <table> | |
| <tr class="example1"> | |
| <th></th> | |
| <td></td> | |
| </tr> | |
| <tr class="example2"> | |
| <th></th> | |
| <td></td> | |
| </tr> | |
| <tr class="example3"> | |
| <th></th> | |
| <td></td> | |
| </tr> | |
| <tr class="example4"> | |
| <th></th> | |
| <td></td> | |
| </tr> | |
| </table> | |
| <div class="settings"> | |
| <div class="status">Position: static</div> | |
| <input type="button" value="switch" class="switch relative / static" /> | |
| </div> | |
| <p> | |
| The "offsetTop" and "offsetLeft" properties return the element's position in relation to <br> | |
| <b>THE NEAREST ANCESTOR ELEMENT WITH POSITION RELATIVE / ABSOLUTE</b>, <br> | |
| and <u>not</u> to the body. This can lead to some confusion. | |
| </p> | |
| <p> | |
| Solution: add up the position of all the relative positioned ancestors. | |
| </p> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function getOffsetTop(element) | |
| { | |
| var el = element; | |
| var tpx = el.offsetTop; | |
| while (el.offsetParent != null) { | |
| tpx += el.offsetParent.offsetTop; | |
| el = el.offsetParent; | |
| } | |
| return tpx; | |
| } | |
| //------------------- | |
| function updateAll() | |
| { | |
| update('div.example1', 'tr.example1 td'); | |
| update('div.example2', 'tr.example2 td'); | |
| update('div.example3', 'tr.example3 td'); | |
| update('div.example4', 'tr.example4 td'); | |
| } | |
| function update(div, td) | |
| { | |
| var d = document.querySelector(div); | |
| var t = document.querySelector(td); | |
| var n = d.offsetTop; | |
| var c = getOffsetTop(d); | |
| t.innerHTML = | |
| 'offsetTop: '+n+(n != c ? ' <-- the problem' : '')+'<br>'+ | |
| 'getOffsetTop: '+c | |
| } | |
| //------------------- | |
| updateAll(); | |
| document.querySelector('.switch').addEventListener('click', function(e) | |
| { | |
| if (document.body.classList.contains('relative')) { | |
| document.body.classList.remove('relative'); | |
| document.querySelector('.status').innerText = 'Position: static'; | |
| } else { | |
| document.body.classList.add('relative'); | |
| document.querySelector('.status').innerText = 'Position: relative'; | |
| } | |
| updateAll(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { box-sizing: border-box; font-size: inherit; line-height: inherit;} body { margin: 0px auto; text-align: center; font-size: 16px; line-height: 25px; font-family: 'Roboto', 'Arial'; color: #fafbfc; background-color: #25272A;} .settings { margin-top: 20px; text-align: center;} table { border-collapse: collapse; width: 320px; margin: 20px auto;} th, td { padding: 3px; text-align: left; } th { width: 70px; } div.example { padding: 20px; margin: 0px auto;} .relative div.example { position: relative;} div.example:before { display: block; height: 0px; width: 100px; margin-top: -20px; margin-left: -121px; margin-bottom: 20px; font-size: 14px; line-height: 18px; content: 'div x';} div.example1 { width: 220px; height: 160px; color: #fff; background-color: #fff;} div.example1:before { content: '0px -------------'; border-top-color: #fff;} tr.example1 * { color: #fff; border: solid 1px #fff;} tr.example1 th { background-color: #fff;} div.example2 { width: 180px; height: 120px; color: #dd4a68; background-color: #dd4a68;} div.example2:before { content: '20px -------------'; border-top-color: #dd4a68;} tr.example2 * { color: #dd4a68; border: solid 1px #dd4a68;} tr.example2 th { background-color: #dd4a68;} div.example3 { width: 140px; height: 80px; color: #E4F8E1; background-color: #E4F8E1;} div.example3:before { content: '40px -------------'; border-top-color: #E4F8E1;} tr.example3 * { color: #E4F8E1; border: solid 1px #E4F8E1;} tr.example3 th { background-color: #E4F8E1;} div.example4 { width: 100px; height: 40px; color: #7ebeda; background-color: #7ebeda;} div.example4:before { content: '60px -------------'; border-top-color: #7ebeda;} tr.example4 * { color: #7ebeda; border: solid 1px #7ebeda;} tr.example4 th { background-color: #7ebeda;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment