CSS PositioningCS 3550

Dr. Brian Durney

The CSS position propertyPlace an HTML element within a container

Four possible values:staticrelativeabsolutefixed

Specifying a positiontopleftbottomright

heightwidth

<img src="L2.png"style="position: relative; left: 100px; top: 20px;">

L2.png

No positioning: element is in the normal flow.

<div class="LDiv" style="background: #ED8"><img src="L2.png">orem ipsum dolor sit amet, consectetur ...</div>

staticThe browser uses its usual layout rules to determine the position of the element within the document flow.

Default value for position.Element cannot be positioned with top, left, etc.

Positioned element is in the normal flow.

left and top values are ignored.

<img src="L2.png"style="position: static; left: 100px; top: 20px;">

relativeThe browser first allocates space for the

positioned element in the normal flow.Then the browser shifts the positioned

element as specified by top, left, etc.Original space allocated for positioned

element is still allocated.Subsequent elements are not affected.

Positioned element is displaced within containing element.

Original position is left empty.

<img src="L2.png"style="position: relative; left: 100px; top: 20px;">

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

Positioned element is placed within containing element.

Original position is not left empty.

<img src="L2.png"style="position: absolute; left: 100px; top: 20px;">

Div is not positioned. The image is placed with respect to the body of the document.

<img src="L2.png"style="position: absolute; left: 100px; top: 20px;">

Div is positioned. The image is placed with respect to the div.

<div style="position:relative"><img src="L2.png"style="..."></div>

<div><img src="L2.png"style="..."></div>

fixedThe browser positions the element with respect to the browser window in which it is displayed.

The element does not move when the window is scrolled.

Positioned element is placed within browser window.

Element does not move when window is scrolled.

<img src="L2.png"style="position: fixed; left: 100px; top: 20px;">

SummaryPosition of an element can be static, relative, absolute, or fixed.

left, top, right, and bottom properties Numerically specify the element’s positionIgnored if position is staticMeasured with respect to a containing

element, the document body, or the window, depending on the type of position