CSS Positioning
Positioning
The CSS positioning properties allow you to position an
element. It can also place an element behind another, and
specify what should happen when an element's content is
too big.
Elements can be positioned using the top, bottom, left, and
right properties. However, these properties will not work
unless the position property is set first. They also work
differently depending on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static
positioned element is always positioned according to the
normal flow of the page.
Static positioned elements are not affected by the top, bottom,
left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the
browser window.
It will not move even if the window is scrolled:
Example
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Fixed positioned elements can overlap other elements.
Relative Positioning
A relative positioned element is positioned relative to its normal
position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Absolute Positioning
An absolute position element is positioned relative to the
first parent element that has a position other than static.
If no such element is found, the containing block is
<html>:
Example
h2
{
position:absolute;
left:100px;
top:150px;
}
Overlapping Elements
When elements are positioned outside the normal
flow, they can overlap other elements. The z-
index property specifies the stack order of an
element (which element should be placed in
front of, or behind, the others).
An element can have a positive or negative stack
order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
bottom and top Property
For absolutely positioned elements, the bottom property
sets the bottom edge of an element to a unit
above/below the bottom edge of its containing element.
For relatively positioned elements, the bottom property sets
the bottom edge of an element to a unit above/below its
normal position.
Value Description
auto Lets the browser calculate the bottom edge
position. This is default
length Sets the bottom edge position in px, cm, etc.
Negative values are allowed
% Sets the bottom edge position in % of containing
element. Negative values are allowed
left and right Property
For absolutely positioned elements, the
left property sets the left edge of an
element to a unit to the left/right of
the left edge of its containing element.
For relatively positioned elements, the
left property sets the left edge of an
element to a unit to the left/right to its
normal position.
Property values and description same as
bottom
clip Property
The clip property lets you specify the
dimensions of an absolutely positioned
element that should be visible, and the
element is clipped into this shape, and
displayed.
Value Description
shape Clips an element. The only valid value
is: rect (top, right, bottom, left)
auto No clipping will be applied. This is
default
cursor Property
The cursor property specifies the type of cursor
to be displayed when pointing on an element.
Value Description
URL A comma separated of URLs to custom
cursors. Note: Always specify a generic cursor at the end
of the list, in case none of the URL-defined cursors can be
used
auto Default. The browser sets a cursor
crosshair The cursor render as a crosshair
default The default cursor
e-resize The cursor indicates that an edge of a box is to be moved
right (east)
help The cursor indicates that help is available
move The cursor indicates something that should be moved
n-resize The cursor indicates that an edge of a box is to be moved up (north)
ne-resize The cursor indicates that an edge of a box is to be moved up and right
(north/east)
nw-resize The cursor indicates that an edge of a box is to be moved up and left
(north/west)
pointer The cursor render as a pointer
progress The cursor indicates that the program is busy (in progress)
s-resize The cursor indicates that an edge of a box is to be moved down (south)
se-resize The cursor indicates that an edge of a box is to be moved down and right
(south/east)
sw-resize The cursor indicates that an edge of a box is to be moved down and left
(south/west)
text The cursor indicates text
w-resize The cursor indicates that an edge of a box is to be moved left (west)
wait The cursor indicates that the program is busy
overflow Property
The overflow property specifies what happens if
content overflows an element's box.
Value Description
visible The overflow is not clipped. It renders outside
the element's box. This is default
hidden The overflow is clipped, and the rest of the
content will be invisible
scroll The overflow is clipped, but a scroll-bar is added
to see the rest of the content
auto If overflow is clipped, a scroll-bar should be
added to see the rest of the content
position Property
The position property specifies the type of positioning method
used for an element (static, relative, absolute or fixed).
Value Description
static Default. Elements render in order, as they appear
in the document flow
absolute The element is positioned relative to its first
positioned (not static) ancestor element
fixed The element is positioned relative to the browser
window
relative The element is positioned relative to its normal
position, so "left:20" adds 20 pixels to the
element's LEFT position
z-index Property
The z-index property specifies the stack order of an
element. An element with greater stack order is always in
front of an element with a lower stack order.
z-index only works on positioned elements
(position:absolute, position:relative, or position:fixed).
Value Description
auto Sets the stack order equal to its parents. This is
default
number Sets the stack order of the element. Negative
numbers are allowed
