The values for these properties are specified as the distance of the named side from the side of the enclosing block.

.thing {
position: relative;
left: 50px;
top: 50px;
}

The element in the thing class is shifted 50 pixels down and 50 pixels to the left from the elements that precede them in the page layout.

The absence of romance in my history will, I fear, detract somewhat from it interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content.

Note that without this sentence the box was placed one line below the word, 'content' with left setting of 50 px and top 0 px.

The absence of romance in my history will, I fear, detract somewhat from it interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time.

This matches the output shown on [NLL261].

.offset {
	border: 3px; solid blue;
	padding: 10px;
	margin: 10px;
	background-color: gray;
	position: relative;
	top: 10px;
	left: 50px;
	width: 33% }
		

You can spot the problem right away on this page – the relatively positioned element overlaps the paragraph above it. I used a negative value for the top property to move the element up 50 pixels, and also moved it to the left 50 pixels.

Changing the value in top in the .offset style from -46 to 10 corrects the overlap.