You may remember the functionality that Firefox were using lots of versions ago, where you were able to see the page you were working on in 3D and see the z-index of the elements and understand which one was covering the other. It was a good utility that a certain point was removed maybe because it was not used too much and it was given the browser some sort of slow interaction.
With the following code, you cannot see the 3D of the page, of course, but you can have an idea of the sizes of each element in the page you are working on.
The following code is meant to be used when you are working with layouts: it is a way of highlighting the elements in your page and understand the sizes and the deep level of each one.
I suggest to apply it at root level of your CSS code to see different colours along each element.
* {