Latest web development tutorials

CSS Positioning (Positioning)

Positioning sometimes very tricky!

Decide to show in front of the elements!

Elements can overlap!

Positioning (Positioning)

CSS positioning properties allow you to locate an element. It can also be an element in another element behind, and specify an element content is too large, what should happen.

Elements can be used at the top, bottom, left and right positioning attributes. However, these properties will not work unless the position property is set first. They also have different ways of working, depending on the positioning method.

There are four different positioning methods.

Static positioning

Default HTML elements, that is not located, the elements appear in the normal stream.

Static positioning elements will not be top, bottom, left, right influence.

Fixed positioning

Position of the element relative to the browser window is a fixed position.

Even when the window is rolling it does not move:

Examples

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

try it"

Note: Fixed positioning in IE7 and IE8 description DOCTYPE need to support!

Fixed positioning of the position of the document elements independent of flow, and therefore does not occupy space.

Fixed positioned elements and other elements overlap.

Relative positioning

Relative positioning element is positioned relative to its normal position.

Examples

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

try it"

Can be moved relative positioning of content elements and overlapping elements, it does not change the original space occupied.

Examples

h2.pos_top
{
position:relative;
top:-50px;
}

try it"

Relative positioning element is often used as a container block absolutely positioned elements.

Absolute positioning

Position absolute positioning of elements relative to the nearest positioned parent element, if the element is not already positioned parent element, its position relative to the <html>:

Examples

h2
{
position:absolute;
left:100px;
top:150px;
}

try it"

Absolutely positioned so that the position of the document elements independent of flow, and therefore does not occupy space.

Absolutely positioned elements and other elements overlap.

Overlapping elements

Orientation and flow independent of document elements, so they can cover other elements on the page

z-index attribute specifies the stacking order of an element (which element should be placed in front of or behind)

Element can have a positive or negative stack order of:

Examples

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

try it"

Element has a higher stacking order is always in front of the lower stacking order of elements.

Note: If two positioned elements overlap, do not specify the z - index, final positioning of the elements in the HTML code will be displayed on top.

Examples

More examples

Shape cutting elements

This example shows how to set the shape of the element. The element is clipped into this shape, and displayed.

How to use the scroll bar to display the contents of the inner element overflow

This example demonstrates the overflow property to create a scroll bar, when the contents of an element in the designated area is too large, how to set up to accommodate.

How to set the browser to automatically handle overflow

This example demonstrates how to set the browser to automatically handle overflow.

Change Cursor

This example demonstrates how to change the cursor.

All CSS positioning properties

"CSS" column indicates the number which CSS (CSS1 or CSS2) version of the definition of the property.

Attributes Explanation value CSS
bottom Offset defines the boundary between the lower positioning element outside its containing block from the border under. auto
length
%
 inherit 		2
clip Clips an absolutely positioned elements shape
 auto
inherit 		2
cursor Move the cursor to display the specified type url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help 		2
left Defines the targeting elements left margin offset block boundary between the left edge of its containing. auto
length
%
 inherit 		2
overflow
When the content of the element set what happens when overflowed its region. auto
hidden
scroll
visible
inherit 		2
overflow-y
Specifies how to handle the contents of the top / bottom edge of the overflow element content area auto
hidden
scroll
visible
no-display
no-content 		2
overflow-x
Specifies how to handle to the right / left edge of the content area of ​​the element content overflow auto
hidden
scroll
visible
no-display
no-content 		2
position Specify the type of positioning elements absolute
fixed
relative
static
inherit 		2
right It defines the targeting elements comprising its border and right margin offset between the block right border. auto
length
%
 inherit 		2
top It defines a positioning element on the border and its margin on the block contains the offset between the boundaries. auto
length
%
 inherit 		2
z-index Setting the stacking order of elements number
 auto
inherit 		2