Now of course though, the tooltip still is in the wrong position, here at the bottom of the page,
that's not where we want it, it would be nice to displayed here below this button for example, so below
this DOM node to which it belongs
and for that we need to find out where exactly that sits on our page, which coordinates this has
and we'll need to find some information about its size as well as you will see
and for that, we first of all need to understand how items are positioned,
well that happens with the help of CSS
and simply based on how the browser renders a page
but we also need to understand how we can get the exact coordinates, the exact calculated width and so
on because as you know with CSS, even without being a CSS expert, you probably know you cannot just assign
pixel values,
you can also use something like rem which is dynamically calculated,
you can use percentages, you can use media queries to use dynamic different sizes
and therefore if you want to find out the exact size as it was rendered, you need Javascript and you
can indeed get coordinates and so on of any DOM element you want to and
that's exactly what we need here. For that
attached you find a zip file with two files in there and that would be the sizes.html file and the
sizes.css file.
If you extract these files, drag the sizes.html file next to your index.html file and the sizes.css
file in the styles folder and with that you can go to your page here and temporarily replace
index.html here at the end with sizes.html and you'll find this page here. If you load that, you'll
get an error regarding a missing sizes.js file, you can simply add one, should be empty anyways and
this is simply a basic dummy file here, dummy setup where we can practice with sizes, positions and so
on.
Now for that, to get access to this box here, we can select it by the ID or here in the dev tools, you
can also select it and then when you select it here on the right, if you mark this div here, you can
also use it in your console with $0.
This is just a shortcut the browser developer tools offer to you and then you have direct access to
the DOM node and you can work with it.
Now which sizes and which properties do we have available that help us with understanding the positioning,
the width and so on? Well for example, there is a method you can call, getBoundingClientRect, if you
execute this as a method, you get back an object which gives you some useful information about this box
and you can run this for any element on the page.
Now what this gives you is a couple of coordinates and sizes, to understand these values,
you need to understand that the browser basically renders the page in a two-dimensional coordinate system
with an x-axis from left to right and a y-axis from top to bottom
and that's important.
It's not like a traditional coordinate system where the y-axis would go from bottom to top and x
from left to right at the bottom
but instead it's all starting in the top left corner and that makes sense if you consider how a web
page is rendered,
it's rendered from top to bottom, not built up from bottom to top.
This coordinate system also thinks in pixels and therefore in the top left corner,
we would have the coordinate 0 0, x has a value of 0 and y has a value of 0. All the way on the
right here,
we would have y still equal to zero but x would be
basically the width of your screen or the width of this document. All the way on the bottom left here,
x would be 0, y would be just as high as your document and in the bottom right corner, x would be as
big as your width and y would be as big as the height of this document.
So this is how you can read this, therefore if you see x y here,
this basically means that this box which we selected has its top left corner at a position of 100
pixels down and 100 pixels from the left.
So the x coordinate on the screen is 100 and the y coordinate is 100 from the top left
corner and we have that positioning because if you check out the sizes.css file,
indeed I have a margin of 100 pixels set for the body which means any element in the body and
this div with this ID is in the body is moved in 100 pixels from top and left because that's
reserved as a margin for the body,
so that's how we get there.
We also got the top and the left value and that's the same as x and y here as you can see
and most of the time that will be the case, if you have a negative width or height, that can differ depending
on the exact positioning and your CSS code but left and top simply gives you the coordinates of the
leftmost and the topmost point of this box in the coordinate system
and typically that's the same as x and y.
More interesting is bottom and right,
well that in the end is just the combination of left and top or x and y with width and height. So
bottom and right basically tells you where the bottommost and the rightmost point is indeed coordinate
system that starts on the top left and therefore width and height are also important of course, should be
pretty self-explanatory, width gives you the total width of the box, height gives you the height of the
box. So this is some rough general information you can get about this box. Now you can also dive into
more specialized properties though if you only need a single value there or if you want to have different
values for some of the sizes based on whether you want to include a border or not and so on.
So let's have a look at that as well.