How do the CSS top bottom left and right attributes work?

Question

I was wondering what the logic was behind the CSS attributes for top, left bottom and right.

for exa

Answer 1

top, right, left, and right; refer to specific coordinates in the screen (or container) whereas float:right, and float:left respect the padding the container may have set previously.

For instabnce in the DEMO I include here. You will see that both elements are inside the same wrapper. The float is restrained to the wrapper width and padding. The other element is following specific instructions to be located where I want it. In this case 100px down from the top and 0px from the right (of the screen)

There is a misconception where some developers think it follows the top-left coordinate of the screen as (0,0). Not exactly. As far as position absolute goes every edge is a 0. So when you say left:10px. It means 10px towards the center of the screen. Same for right:0px. It means 10px towards the center of the screen from the right edge.