1
Let's look at how styles can be used to position elements in an HTML document.


2
The CSS position property is used to place an HTML element within a container. There are four possible values for the position property: static, relative, absolute, and fixed. Absolute is probably the most commonly used value.


3
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.


4
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.


5
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.


6
Here is what our sample document looks like with the L2 image statically positioned. 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.


7
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 right properties. 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.


8
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 been shifted
=>
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 left empty,
=>
and the text that follows the image is unaffected by the shift except that some of it is covered.


9
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 element.


10
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 this case
=>
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.


11
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 body.
=>
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.


12
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.


13
The L2 image is positioned relative to the browser window and does not move when the window is scrolled.


14
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 element's position. 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 the element.