Technical level: Advanced/Experienced
|| Date: 28th September 2002||
Author: Nigel Peck
Introduction
This article is aimed at experienced CSS developers
who need a reference for the properties related to
positioning in CSS 2. Each section of this article
includes a link to the relevant section of the CSS
2 Specification.
This article is not intended to cover all of the
positioning stuff in the Specification in depth but
to only cover those properties and their values that
are implemented in some or all modern browsers and
are of real-world use to you today.
Definitions
First I will give a few definitions, there are some
concepts that need to be explained, you can use this
to check back if you stumble on something or just
read it now if you prefer.
The Viewport
http://www.w3.org/TR/REC-CSS2/visuren.html#q2
The Viewport is the area on the screen that your
web page is displayed in. This is not the same as
the initial containing block.
The Initial Containing Block
http://www.w3.org/TR/REC-CSS2/visuren.html#initial-containing-block
The Initial Containing Block is the entire space
assigned to your document. By the entire space I mean
including any bits of the page that you have to scroll
to in order to see them (in the Viewport).
It is possible to limit the size of the initial containing
block by setting the width and height properties of
the root element.
The Root Element
The root element is the html element. When applying
CSS Rules to the root element it is safer (for browsers
to do as you want) to apply them to both the html
and the body element:
html, body {
/* Style Rules Here */
}
Containing Blocks
http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block
Every element in you document has a containing block.
This is the block element that it is inside, for example:
<div id="content">
<div id="example">
</div>
</div>
The div#content is the containing block for div#example.
Box Types
Boxes come in a number of different types. The only
types we are concerned with in this article are block
boxes and inline boxes.
Block Boxes
http://www.w3.org/TR/REC-CSS2/visuren.html#q5
Block boxes are the type of boxes generated (by default
) by elements like <p> and <div>. They
have space around them and elements that come after
start below them instead of next to them.
Inline Boxes
http://www.w3.org/TR/REC-CSS2/visuren.html#q7
Inline elements are displayed next to each other
such as a <strong> element within a paragraph,
the flow of text is not broken.
Positioning Schemes
http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme
There are five styles of positioning in CSS 2.
Normal Flow
http://www.w3.org/TR/REC-CSS2/visuren.html#normal-flow
Positioning is set according to the 'normal' rules
that have been around for nearly a decade.
Relative Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning
Relatively positioned elements are positioned according
to the normal flow and then moved. Elements that come
after behave as if the relatively positioned element
was in its 'normal flow' position, even if this means
they occupy the same screen space.
Float Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Boxes positioned using float are positioned using
normal flow and then moved left or right as far as
they can go. Elements after them will move up to fill
any gap left behind but will flow around them and
will not occupy the same screen space.
Absolute Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioning
Absolutely positioned elements are not affected by
normal flow. They are positioned using values for
their corners as distances from their containing block.
Fixed Positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning
Fixed position elements work in the same way as absolute
positioning except their position is relative to the
Viewport so they do not move if your page is scrolled,
they stay relative to the Viewport.
CSS Positioning Properties
The 'display' Property
http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop
The display property is used to control the box type
used for an element. This allows you to do things
like:
set bold text to be block level,
have inline paragraphs or
stop an element from being displayed or taking up
any screen space.
display:block
Sets the elements selected to block level.
display:inline
Sets the elements selected to inline.
display:none
Stops the display of this element. The element is
completely removed from the display so that it does
not take up and screen space.
There are a number of other values for the display
property which we are not concerned with in this article
as they deal with lists, tables and other box types
which we are not concerned with here.
The 'position' Property
http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position
The position property is used to specify the following
positioning schemes:
Normal Flow,
Relative Positioning,
Absolute Positioning and
Fixed Positioning.
This is done by setting position to one of the following
values:
position:static
Set this box to normal flow, the default for all elements.
position:relative
Use relative positioning for this box specified using
the top, right, bottom and left properties.
position:absolute
Use absolute positioning for this box specified using
the top, right, bottom and left properties.
position:fixed
Use fixed positioning for this box specified using
the top, right, bottom and left properties.
The 'top', 'right', 'bottom' and 'left' Properties
http://www.w3.org/TR/REC-CSS2/visuren.html#position-props
All positioning schemes need you to set these in
order to know how to carry out your positioning request.
You should always set one of 'top' or 'bottom' and
one of 'left' or 'right'. Setting both 'top' and 'bottom'
or both 'left' and 'right' will not usually do what
you want and will usually end up with only 'left'
or 'top' being used respectively.
You may use the following values for these
properties:
Fixed Length
You may use a fixed distance such as 20px for 20 pixels.
Percentage
You may use a percentage value such as 20%, which
is 20% of the containing block's width, or height
value (for left/right or top/bottom respectively).
The 'float' Property
http://www.w3.org/TR/REC-CSS2/visuren.html#float-position
The float property takes three values. Float is ignored
if you have set the position property to either absolute
or fixed.
float:right
The box is floated to the right of the screen.
float:left
The box is floated to the left of the screen.
float:none
The box is not floated.
The 'clear' Property
http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control
This property is used to give control of boxes that
appear after a floated box. Setting this property
on a box will ensure that it will appear below any
floated boxes that come before it.
clear:left
This box will appear below any left-floating boxes
that come before it.
clear:right
This box will appear below any right-floating boxes
that come before it.
clear:both
This box will appear below any left-floating or right-floating
boxes that come before it.
clear:none
This box will not clear any floating boxes that come
before it.
The 'z-index' Property
http://www.w3.org/TR/REC-CSS2/visuren.html#q30
The 'z-index' property is used to specify how boxes
stack 'on top' of each other and is relevant when
you have two boxes that occupy the same screen space.
'z-index' accepts a value between 0 and 32767. In
a situation where two boxes occupy the same screen
space the box with the highest 'z-index' is displayed
'on top'. If both have the same value the one that
comes first in the code is displayed on top.
