To do what you’re attempting, #box isn’t the element that needs to be relatively positioned with your current markup. #box is a sibling of the blue box – they are currently at the same level in the DOM. You have to relatively position the parent in order to “trap” an absolutely positioned child, so you would change the markup to close the #box div after the .absolute one.
BTW, you can’t have more than one element with the same id (i.e. “box”). If you want to use the CSS more than once, change it to a class.