adinan-cenci/get-an-element-s-position.markdown

## get-an-element-s-position.markdown

      
    Raw
  

              get-an-element-s-position.markdown
            
          
    Get an element's position

A Pen by AdinanCenci on CodePen.
License.

  
## index.html
<!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>

## script.js
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();
});

## style.css
* { 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;}
	<!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>
	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();
	});