To start, A div tag is a newline tag. Therefore it will create a newline in the HTML document.
To position the 2 boxes at the same position you need to give an negative value to your second box to move it up, Since it is above the original position.
Second, you did not assign a background color to your boxes so it will be as default its same bg as the body when a height and width is given.
If you need it in reverse then do not assign any top:; to the second box but assign it the first box with an positive value. Since the positive value is downwards to the page. Negative values it upwards the page.
Hope this helps👍
In additional, you can work with z-index to give a certain box a overlay to the other one(s).