z-index demonstration

Contrary to many descriptions elsewhere the element with the highest z-index will not necessarily be in front. z-index is subordinate to, and cannot override, the natural (HTML) order. This is illustrated by the W3C image in front of the red background below. The green and blue demonstrations are not affected by an overriding HTML order and hence the green background is in front of its image. Click an image to see W3C's 'Elaborate description of Stacking Contexts'.