HTML and CSS Reference
In-Depth Information
given length values consisting of a positive or negative number and units des-
ignator, a percentage value, or the keyword
auto
or
inherit
. he
auto
value is
the default and keeps the element in the same place with respect to its contain-
ing element.
he notion of an element's containing element needs some explanation.
When a block element has absolute positioning, its containing element is
its closest ancestor that does not have static positioning. If no such ancestor
element exists, the containing element is the document's
html
element. his
means that each element that is not statically positioned has its own steam
of content low, and an absolutely positioned element can only jump out
of its own place in the current stream. For example, suppose an absolutely
positioned element has a great-grandparent element that is already outside
the document low. he element is positioned with respect to the edges of its
great-grandparent.
When an element has ixed positioning, it jumps out of all streams in the
document low and is ofset relative to the document window without regard
for the status of any ancestors. A ixed positioned element does not scroll along
with the document's content. You oten see such elements as extra toolbars at
the top of the window or as feedback buttons at the sides or bottom.
he containing element for a relatively positioned element is the rectangle
containing the element, along with its padding, borders, and margins. All
positioned block elements retain their padding, borders, and margins.
he ofset amounts set by the
top
,
right
,
bottom
, and
left
properties are
measured, on each respective side, from the inner edge of the border (if there's
no border, from the inner edge of the margin) to the outer edge of the ele-
ment's corresponding margin. Example 3.19 illustrates how this works.
Example 3.19: HTML to demonstrate CSS positioning
<!DOCTYPE html>
<html>
<head>
<title>Example 3.19a</title>
<style type="text/css">
body { padding: 1em; font-family: sans-serif; border: dotted; }
#d1 { width: 200px; height: 200px; border: dashed; }
#d2 { width: 50%; height: 50%; border: solid; }
</style>
</head>
continues
