HTML and CSS Reference
In-Depth Information
Positioning Objects
One page section you haven't added to the Cycle Pathology home page is the
header
element, which contains the group logo. Dan would like the header moved to the top-
left corner of the page.
The ability to position an object was one of the fi rst enhancements to the origi-
nal CSS1 specifi cations. Collectively, the various positioning styles were known as
CSS-Positioning
, or more commonly,
CSS-P
. CSS-P became part of the specifi cation
for CSS2, and positioning styles were some of the fi rst CSS2 styles to be adopted by
browsers.
To place an element at a specifi c position, you use the style properties
position:
type
;
top:
value
;
right:
value
;
bottom:
value
;
left:
value
;
where
type
indicates the type of positioning applied to the element, and the
top
,
right
,
bottom
, and
left
properties indicate the coordinates of the top, right, bottom, and left
edges of the element, respectively. In practice, usually only the left and top coordinates
are specifi ed because the right and bottom coordinates can be inferred given the ele-
ment's height and width. Coordinates can be expressed in any of the CSS measuring units.
The
position
property has fi ve possible values:
static
(the default),
absolute
,
relative
,
fixed
, and
inherit
. In static positioning, browsers place an element based
on where it would naturally fl ow within the document. This is essentially the same as not
using any CSS positioning at all. Browsers ignore any values specifi ed for the
left
or
top
properties under static positioning.
Positioning an Object with CSS
• To position an object at a specific coordinate, use the style properties
position:
type
;
top:
value
;
right:
value
;
bottom:
value
;
left:
value
;
where
type
indicates the type of positioning applied to the object (
absolute
,
relative
,
static
,
fixed
, or
inherit
), and the
top
,
right
,
bottom
, and
left
properties indicate the coordinates of the object.
Absolute Positioning
Absolute positioning
places an element at specifi c coordinates either in the page or
within a container element. For example, the style rule
header {
position: absolute;
left: 100px;
top: 50px;
}
places the
header
element at the coordinates (100, 50), meaning 100 pixels to the right
and 50 pixels down from upper-left corner of the page or the element that contains
the header. Once an element has been moved using absolute positioning, it affects the
