Let's look at how styles can be used to position elements in an
The CSS position property is used to place an HTML element within
There are four possible values for the position property:
static, relative, absolute, and fixed.
Absolute is probably the most commonly used value.
The position property tells what type of positioning to use.
The attributes on this slide numerically specify the position.
You can specify the top, left, bottom, right, height, or width
of an HTML element.
The example at the bottom of the screen specifies that relative
positioning will be used for the L2.png image.
The left edge of the image will be 100 pixels from the left edge
of the containing element, and the the top of the image will be 20
pixels below the top of the containing element.
The screen capture on this slide shows an HTML document that
includes the image L2.png.
The L2 image shows a fancy capital L, as shown in the upper
right corner of this slide.
The L2 image is contained within a div that has a lighter-colored
background than the body of the document.
We will look at how this document changes depending on what kind
of positioning is used with the image.
The first position value we will look at is static.
If an element's position is static, the browser uses its usual layout
rules to position the element within the document flow.
Static is the default value for the position property.
The browser will ignore values for the properties, top, left, bottom,
and right for statically positioned elements.
Here is what our sample document looks like with the L2 image
The image is in its normal place in the document flow, and the
page layout is the same as it was when the image did not have
a position property.
The tag for the L2 image is shown at the bottom of the screen.
The left and top values in the HTML are ignored.
When an element's position is set to relative, the browser
allocates space for the element in the normal document flow, then
shifts the element as specified by the top, left, bottom, and
The space allocated for the positioned element before the shift
is still allocated to that element and so is usually empty.
Elements after the shifted element are not affected by the shift,
except that some might be covered by the shifted element as we'll
see in the next slide.
In this screen capture, the value of the position property for the
L2 image is set to relative.
Because of the values of the left and top attributes, the image has
100 pixels to the right [PAUSE]
and down 20 pixels. [PAUSE]
Note that the left and top values are relative to the original
position of the element.
The space allocated at the original position for the image is
and the text that follows the image is unaffected by the shift
except that some of it is covered.
If an element's position property is set to absolute, the browser
removes the element from its containing flow and positions it
with respect to the document body or another positioned element.
Subsequent elements are moved up to take the place of the relocated
In this screen capture, the L2 image's position property has been
set to absolute.
The image is placed relative to a containing element, which in
is the document body. [PAUSE]
Note that the original position of the image is not left empty as
it was with relative positioning.
In fact, the browser completely ignores the positioned image when
laying out the lighter-colored div, even though the image tag is
nested inside the div's tags.
These two screen captures show two different placements of the L2
image even though the image tag is exactly the same for both documents.
In both documents the position for the image is set to absolute, the left
property is set to 100 pixels, and the top property is set to 20 pixels.
The difference in positions is due to the positioning of the containing
div, which appears in the documents as a lighter-colored rectangle.
In the document on the left, the containing div does not have a
position property, and the L2 image is positioned relative to the document
In the document on the right, the containing div has a position property
which is set to relative.
Because the div has been positioned, it is the containing element for the
image, and the left and top values are measured relative to the div.
When the position of an element is fixed, it is positioned
with respect to the browser window in which it is displayed.
The element does not move when the window is scrolled.
The L2 image is positioned relative to the browser window and does not
move when the window is scrolled.
In summary, we have seen that the position of an element can be static,
relative, absolute, or fixed.
The left, top, right, and bottom properties numerically specify an
Those properties are ignored if the position property is static.
They are measured with respect to a containing element, the document
body, or the window, depending on the type of position specified for