HOTSPOT
You develop a webpage.
The layout of the webpage must resemble the following image:
You need to ensure that the page renders properly.
How should you complete the relevant CSS styles? (To answer, select the appropriate option from
each drop-down list in the answer area.)
Answer: 
http://jsfiddle.net/6quqovfr/
http://jsfiddle.net/6quqovfr/8/
previous link was wrong.
If I look at the JSfiddle, relative seems a better choice for the second span as well.
It looks more correct compared to the image of how it should look.
Also, absolute is definetely wrong because: Absolute would place the element depending on how the ancestor was placed (the div). Therefore the element is placed way too far to the right. (It can’t absolute, but not relative either, as the distance is easily more then 100px –> the top should be 200px and it seems the same difference)
Honestly float: left seems to be the best answer for the second part.
I meant float:right ofc
IMO The answer is correct. if CSS is left: 100px instead of left:-100px.
First we need to use relative because we want the content of span1 to show
in the same position as the normal flow( inline ). A span would appear inline so we use relative without any offset from the normal position to keep the original position.
Second could be absolute. If we use relative then span2 is not removed from the normal flow which means that we would see a blank space with the size of span2 after “start of span1 contents” . With absolute we completely remove the object from the flow and position the object in relation to the first non static parent which in this case is the span1.