visuren.html

CSS lets learn this step by step...

name="value-inst-table-row"><strong><strong>table-row</strong></strong></a></span>, <span
class="index-inst" title="'table-cell'"><a
name="value-inst-table-cell"><strong><strong>table-cell</strong></strong></a></span>, and <span
class="index-inst" title="'table-caption'"><a
name="value-inst-table-caption"><strong>table-caption</strong></a></span>
<dd>These values cause an element to behave like a table element
(subject to restrictions described in the chapter on <a
href="tables.html">tables</a>).
</dl>

<P>Note that although the <a href="cascade.html#initial-value">initial
value</a> of <a href="visuren.html#propdef-display" class="noxref"><span class="propinst-display">'display'</span></a> is
'inline', rules in the user agent's <a
href="cascade.html#default-style-sheet">default style sheet</a> may <a
href="cascade.html">override</a> this value. See the <a
href="sample.html">sample style sheet</a> for HTML 4.0 in the
appendix.

<div class="example"><P style="display:none">Example(s):</P><P>
<P>Here are some examples of the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property:

<PRE>
P   { display: block }
EM  { display: inline }
LI  { display: list-item } 
IMG { display: none }      /* Don't display images */
</PRE>
</div>

<P><span class="index-inst" title="conformance"><a name="x32"
href="conform.html#conformance">Conforming</a></span> HTML user agents
may <span class="index-inst" title="ignore"><a name="x33"
href="syndata.html#ignore">ignore</a></span> the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property.

<h2>9.3 <a name="positioning-scheme">Positioning schemes</a></h2>

<P>In CSS2, a box may be laid out according to three <a name="x34"><span
class="index-def" title="positioning scheme"><dfn>positioning
schemes:</dfn></span></a></p>

<ol>
<li><a href="#normal-flow">Normal flow</a>. In CSS2, normal
flow includes <a href="#block-formatting">block formatting</a>
of <a href="#block-box">block</a> boxes, 
<a href="#inline-formatting">inline formatting</a>
of <a href="#inline-box">inline </a> boxes, <a
href="#relative-positioning">relative positioning</a> of
block or inline boxes, and positioning of
<a href="#compact">compact</a> and <a href="#run-in">run-in</a> boxes.
<li><a href="#floats">Floats</a>. In the float model,
a box is first laid out according to the normal flow, then 
taken out of the flow and shifted
to the left or right as far as possible. Content may
flow along the side of a float.
<li><a href="#absolute-positioning">Absolute positioning</a>. 
In the absolute positioning model, a box is removed from
the normal flow entirely (it has no impact on later siblings)
and assigned a position with respect to a containing block.
</ol>

<div class="note">
<em><strong>Note.</strong>
CSS2's positioning schemes help authors make their documents
more accessible by allowing them to avoid mark-up tricks
(e.g., invisible images) used for layout effects.
</em>
</div>

<h3>9.3.1 <a name="choose-position">Choosing a positioning scheme:</a> <a href="visuren.html#propdef-position" class="noxref"><span
class="propinst-position">'position'</span></a> property</h3>

<P>The <a href="visuren.html#propdef-position" class="noxref"><span class="propinst-position">'position'</span></a> and <a href="visuren.html#propdef-float" class="noxref"><span
class="propinst-float">'float'</span></a> properties determine which 
of the CSS2 positioning algorithms is used to calculate 
the position of a box.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'position'"><a name="propdef-position" class="propdef-title"><strong>'position'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>static | relative | absolute | fixed | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>static
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements, but not to generated content
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>The values of this property have the following meanings:</P>

<dl>
<dt><strong>static</strong>

<dd>The box is a normal box, laid out according to the <a
href="#normal-flow">normal flow</a>. The <a href="visuren.html#propdef-left" class="noxref"><span
class="propinst-left">'left'</span></a> and <a href="visuren.html#propdef-top" class="noxref"><span
class="propinst-top">'top'</span></a> properties do not apply. 

<dt><strong>relative</strong>

<dd>The box's position is calculated according to the <a
href="#normal-flow">normal flow</a> (this is called the position in
normal flow). Then the box is offset <a
href="#relative-positioning">relative</a> to its normal position. When
a box B is relatively positioned, the position of the following box is
calculated as though B were not offset.

<dt><strong>absolute</strong>
<dd> The box's position (and possibly size) is specified
with the <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a>,
<a href="visuren.html#propdef-right" class="noxref"><span class="propinst-right">'right'</span></a>, 
<a href="visuren.html#propdef-top" class="noxref"><span class="propinst-top">'top'</span></a>,
and <a href="visuren.html#propdef-bottom" class="noxref"><span class="propinst-bottom">'bottom'</span></a> properties.
These properties specify offsets with respect to the box's
<a href="#containing-block">containing block</A>. Absolutely
positioned boxes are taken out of the normal flow. This means
they have no impact on the layout of later siblings. Also,
though <a href="#absolutely-positioned">absolutely positioned</a> 
boxes have margins, they
do not <a href="box.html#collapsing-margins">collapse</a>
with any other margins.

<dt><strong>fixed</strong>
<dd> The box's position is calculated according to the 'absolute'
model, but in addition, the box is <a
href="#fixed-positioning">fixed</a> with respect to some reference. In
the case of <a href="media.html#continuous-media-group">continuous
media</a>, the box is fixed with respect to the <a
href="#viewport">viewport</A> (and doesn't move when scrolled).  In
the case of <a href="media.html#paged-media-group">paged media</a>,
the box is fixed with respect to the page, even if that page is seen
through a <a href="#viewport">viewport</A> (in the case of a
print-preview, for example).  Authors may wish to specify 'fixed' in a
media-dependent way.  For instance, an author may want a box to remain
at the top of the <a href="#viewport">viewport</A> on the screen, but
not at the top of each printed page. The two specifications may be
separated by using an <a href="media.html#at-media-rule">@media
rule</a>, as in:

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>   
@media screen { 
  H1#first { position: fixed } 
}
@media print { 
  H1#first { position: static }
}
</PRE>   
</div>
</dl>

<H3>9.3.2 <a name="position-props">Box offsets</a>: <a href="visuren.html#propdef-top" class="noxref"><span
class="propinst-top">'top'</span></a>, <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>, <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</span></a>, <a href="visuren.html#propdef-left" class="noxref"><span
class="propinst-left">'left'</span></a></H3>

<P>An element is said to be <span class="index-def" title="positioned
element/box"><a name="positioned-element"><dfn>positioned</dfn></a></span>
if its <a href="visuren.html#propdef-position" class="noxref"><span class="propinst-position">'position'</span></a> property has
a value other than 'static'. Positioned elements generate
positioned boxes, laid out according to four properties:</p>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'top'"><a name="propdef-top" class="propdef-title"><strong>'top'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>positioned elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to height of containing block
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>This property specifies how far a box's top content edge is offset below
the top edge of the box's <a href="#containing-block">containing block</a>.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'right'"><a name="propdef-right" class="propdef-title"><strong>'right'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>positioned
elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to width of containing block
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>This property specifies how far a box's right content edge is offset
to the left of the right edge of the box's <a
href="#containing-block">containing block</a>.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'bottom'"><a name="propdef-bottom" class="propdef-title"><strong>'bottom'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>positioned elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to height of containing block
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>This property specifies how far a box's bottom content edge is offset
above the bottom of the box's <a href="#containing-block">containing
block</a>.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'left'"><a name="propdef-left" class="propdef-title"><strong>'left'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a> | <a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>positioned
elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to width of containing block
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>This property specifies how far a box's left content edge is offset
to the right of the left edge of the box's <a
href="#containing-block">containing block</a>.

<P>The values for the four properties have the following meanings:</p>

<dl>
<dt><strong><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a></strong>
<dd>The offset is a fixed distance from the reference edge.

<dt><strong><a href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a></strong>

<dd>The offset is a percentage of the containing block's width (for <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> or <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>) or height (for <a href="visuren.html#propdef-top" class="noxref"><span
class="propinst-top">'top'</span></a> and <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</span></a>). For 'top'
and 'bottom', if the height of the
containing block is not specified explicitly 
(i.e., it depends on content height), the percentage value
is interpreted like 'auto'.
<dt><strong>auto</strong>
<dd>The effect of this value 
depends on which of related properties have the value 'auto' as
well. See the sections on the 
<a href="visudet.html#abs-non-replaced-width">width</a>
and <a href="visudet.html#abs-non-replaced-height">height</a>
of <a href="#absolutely-positioned">absolutely positioned</a>, 
non-replaced elements for details.
</dl>

<P>For <a href="#absolutely-positioned">absolutely positioned</a>
boxes, the offsets are with respect to the box's <a
href="#containing-block">containing block</a>. For relatively
positioned boxes, the offsets are with respect to the outer edges of
the box itself (i.e., the box is given a position in the normal flow,