Scribd
Upload
14 views

CSSpositioning

The document discusses various CSS positioning properties including position, top, bottom, left, right, z-index, overflow, and clip. It explains how these properties work and provides examples of their usage.

Uploaded by

Ashokkumar A
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
14 views

CSSpositioning

The document discusses various CSS positioning properties including position, top, bottom, left, right, z-index, overflow, and clip. It explains how these properties work and provides examples of their usage.

Uploaded by

Ashokkumar A
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like