Hello
Default behavior of two adjacent image elements (blue and yellow). I'll explain that orange box at the end.
Yellow image using these style properties (relative means relative to where I should have been placed in the flow):
position: relative; right: 50px;
div tag acting as parent element for an image and a text element. Both elements use absolute positioning with the same left property. This creates overlap of the two elements. The text element appears on top of the blue square because it appears after the blue square in the html.
image properties: position: absolute; left:10px;
text properties: position: absolute; left:10px;
Hello
In order for you to see this text, I had to put a ton of "br" statements in the html. When you use absolute positioning on an element that element is taken out of the html flow. That means this text without the "br"s in it would have overlapped the blue image.
This time the text is obscured by the image using the z-index property. When you use absolute positioning and overlapping elements, the element with highest z-index wins.
image properties: position: absolute; left:10px; z-index:100;
text properties: position: absolute; left:10px; z-index:1;
Hello
More "br"s to get here. Immediately following this text is an orange image with the following properties (fixed means relative to the browser window. Fixed also takes the element out of the html flow):
position:fixed; top:40px; left:500px;