Questions about Position of Elements

Hello! I have 2 questions about position.

  1. For example, I have one element that is ubicated in the following position:

Left: 0px
Top 0px:
Position: absolute

And I want to put this element at the bottom of my web page. What I do is to try with different values like Top: +100 or Top +200, so the element goes down. But I have to try with different values until it is in the bottom. My question is if it is possible with Chrome Dev Tools to see the position of the entire web page (from left to right, and from top to bottom) to know exactly wich value I have to put so the element goes to the bottom in my first try.

For example, I want to know that value is needed to sent the element to the bottom, if I need Top:300px or Top:500 px. Where I can see these position values of the entire page?

  1. The other question is this case.
    I have 3 elements in my web page.

One is above the other. And I want to put the third element (that original position is in the bottom), in the top of the page.
I would have to move down manually the 2 other elements, because now this third element is going to be in the top.

There is any way I can make that this third element pull down the others automatically when it is place at the top? And the other 2 elements are going to be lower.


Take a look at this example…

It’s a form demo, but I’ve implemented a bottom aligned result window. Enter a value and watch where the result is displayed.