A coordinate system locates a point with numbers. In two dimensions, perpendicular x and y axes meet at the origin, and an ordered pair (x, y) states the point’s horizontal and vertical position from that reference point. Web interfaces use this math whenever code needs to measure, place, or move something precisely. section 1.4.9 section 10.1
Browser coordinates are intentionally different from the familiar graph: the viewport origin (0, 0) is at the top-left, x increases to the right, and y increases downward. Thus (100, 150) means 100 pixels right and 150 pixels down. Values may also be negative or extend beyond the visible viewport. section 1.4.9 section 10.6
Measure the viewport, then position from it
Viewport-relative coordinates connect CSS positioning, DOM measurements, and pointer events. getBoundingClientRect() reports an element’s sides relative to the viewport, while clientX and clientY report the pointer from the same origin. That shared reference frame makes a cursor-following tooltip straightforward: add a small offset to the pointer coordinates for left and top. section 1.4.9 section 13.1.1
Listing 13.1 A tooltip that follows the mouse pointer
HTML:
<h1>I See Your Pointer</h1>
<h2>The website nobody's talking about!</h2>
<nav>
<button>Home</button>
<button>About</button>
<button>Docs</button>
<button>Contact</button>
</nav>
<div id="tooltip">Welcome to our website!</div>
JavaScript:
document.addEventListener('mousemove', (event) => { #1
const x = event.clientX; #2
const y = event.clientY; #2
const tooltip = document.getElementById('tooltip');
const offsetX = 10; #3
const offsetY = 20; #4
tooltip.style.left = (x + offsetX) + 'px'; #5
tooltip.style.top = (y + offsetY) + 'px'; #5
});
This tooltip listing turns pointer coordinates into CSS left and top values, with offsets that keep the tooltip from covering the hovered location. section 13.1.1
CSS Grid applies the same two-dimensional idea discretely. Columns form the horizontal axis, rows form the vertical axis, and their intersections form cells. Grid lines provide the placement framework, unlike flow layout, where positions are calculated sequentially as elements affect what follows. section 4.1.2 section 4.2
The reference point changes with the task:
- Use client coordinates for positions measured from the viewport’s top-left corner, independent of document scroll. section 13.1.1
- Use page coordinates for positions measured from the document’s top-left corner; convert with scroll position when needed. section 13.1.1
- Use offset coordinates for positions measured from the target element’s top-left corner. section 13.1.1
- Use an element’s percentage-based mini coordinate system when defining clip-path polygons: 0% 0% is top-left and 100% 100% is bottom-right. section 10.4.1
Listing 10.7 Using clip-path to define a polygon
div {
width: 200px;
height: 200px;
background-color: hsl(23 100% 40%);
}
.diamond {
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%
);
}
.arrow {
clip-path: polygon(
0% 30%,
60% 30%,
60% 0%,
100% 50%,
60% 100%,
60% 70%,
0% 70%
);
}
The polygon coordinates plot diamond and arrow vertices inside an element’s own percentage-based coordinate system. section 10.4.1
A coordinate system is the common frame behind layout, interaction, and motion. Once the origin, axis directions, units, and reference area are clear, coordinate pairs can be translated directly into CSS properties or JavaScript calculations. section 1.4.9 section 10.6
