The tollbooths were empty. The middle one stood in a heap of broken glass. Beyond them, the westbound lanes were empty for as far as they could see... [BOX 1]
He dreamed oddly, and all he could remember upon waking was that he seemed to have been walking through endless rows of green corn... [BOX 2]
The 'clip' property is not applied here.
A simple contextual positioning has been created by setting the
'position' property to 'relative'
for the containing block (CB). [BOX 1] and [BOX 2] are absolutely
positioned inside their containing block.
This first example shows only the effects of absolute positioning.
The tollbooths were empty. The middle one stood in a heap of broken glass. Beyond them, the westbound lanes were empty for as far as they could see... [BOX 1]
He dreamed oddly, and all he could remember upon waking was that he seemed to have been walking through endless rows of green corn... [BOX 2]
Different lenghts are specified here: pixels for [BOX 1] and ems for [BOX 2].
The
'clip' property has been applied to an image.
Note: I have used the following syntax:
clip: rect(top right bottom left);. Using the before-mentioned
syntax, all elements tend to disappear from the viewport. If I add a space between
rect and the round brackets, the elements are visibile again, but
they are not clipped. The result remains the same also with a comma used as a
separator between values.
Maybe the elements should be wrapped more than once, as showed in this page.
According to CSS 2.1:
Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas, because a previous revision of this specification was ambiguous in this respect.
(...)
When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when <left> and <right> have the same value (or <top> and <bottom> have the same value), and conversely that no pixels within the element's border box remain hidden when these values are 'auto'.
An element's clipping region clips out any aspect of the element (e.g. content, children, background, borders, text decoration, outline and visible scrolling mechanism — if any) that is outside the clipping region.
The element's ancestors may also clip portions of their content (e.g. via their own 'clip' property and/or if their 'overflow' property is not 'visible'); what is rendered is the cumulative intersection.
If the clipping region exceeds the bounds of the UA's document window, content may be clipped to that window by the native operating environment.
There are several possible causes:
Addenda: I have added a test in quirks mode. Results are exactly the same.