CSS: element positioning

Posted on | In | Comments: | Views:

0. Credit to:

  1. http://javascript.info/coordinates

  2. https://msdn.microsoft.com/en-us/library/hh781509(VS.85).aspx

I. mouse event positon

  1. https://www.w3schools.com/jsref/event_clientx.asp
    • event.clientX: distance to the left border of viewport (position:fixed)
    • event.screenX: distance to the left border of browser
    • event.pageX: distance to the left border of document area(position: absolute)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    text-align: center;
}
#demo2{width: 500px;
    height: 300px;
    border: 1px solid red;
    text-align: center;}
</style>
</head>
<body onclick="showCoords(event)">

<p id="pp">Click in the div element below to get the x (horizontal) and y (vertical) coordinates of the mouse pointer, when it is clicked.</p>

<div ><p id="demo"></p></div>

<p id="demo2"></p>

<p><strong>Tip:</strong> Try to click different places in the div.</p>

<script>
function showCoords(event) {
    var cX = event.clientX;
    var cY = event.clientY;
    var sX = event.screenX;
    var sY = event.screenY;
    var pX = event.pageX;
    var pY = event.pageY;
    
    var slX = scrollX;
    var slY = scrollY;
    var pOffX = pageXOffset;
    var pOffY = pageYOffset;

    var coords1 = "client - X: " + cX + ", Y coords: " + cY;
    var coords2 = "screen - X: " + sX + ", Y coords: " + sY;
    var coords3 = "page - X: "   + pX + ", Y coords: " + pY;
    var coords4 = "sroll - X: "  + slX + ", Y coords: " + slY;
    var coords5 = "pageOffset - X: "  + pOffX + ", Y coords: " + pOffY;
document.getElementById("demo2").innerHTML = coords1 + "<br>" + coords2 + "<br>" + coords3 + "<br>" + coords4 + "<br>" + coords5 + "<br>";
}

</script>

</body>
</html>

II. element position

  1. getBoundingClientRect():
    • top – Y-coordinate for the top element edge,
    • left – X-coordinate for the left element edge,
    • right – X-coordinate for the right element edge,
    • bottom – Y-coordinate for the bottom element edge.
  2. clientHeight: the height of the element
  3. offsetTop: returns the top position (in pixels) relative to the top of the offsetParent element. The returned value includes:
    • the top position, and margin of the element
    • the top padding, scrollbar and border of the offsetParent element
    • The offsetParent element is the nearest ancestor that has a position other than static.
  4. (clientX,clientY): window coordinates, correspond to position:fixed,

  5. (pageX,pageY): document coordinates , correspond to position:absolute

  6. formular:

    • pageY = clientY + height of the scrolled-out vertical part of the document.
    • pageX = clientX + width of the scrolled-out horizontal part of the document.
1
2
3
4
5
6
7
8
9
// get document coordinates of the element
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}

III. Summary

Any point on the page has coordinates:

  1. Relative to the window – elem.getBoundingClientRect().
  2. Relative to the document – elem.getBoundingClientRect() plus the current page scroll.

Window coordinates are great to use with position:fixed, and document coordinates do well with position:absolute.

Both coordinate systems have their “pro” and “contra”, there are times we need one or the other one, just like CSS position absolute and fixed.