CSS Position


The position attribute specifies the positioning type of the element.

The five values of the position property:

Elements can be positioned using the top, bottom, left and right 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.


static position

The default value of the HTML element, that is, no positioning, follows the normal document flow object.

Statically positioned elements will not be affected by top, bottom, left, and right.

Example

div.static
{
    position: static;    
    border: 3px solid #73AD21;
}

 Try It! 


fixed position

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

Even if the window is scrolling, it will not move:

Example

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

 Try It! 

Note: Fixed positioning needs to be described under IE7 and IE8, with !DOCTYPE can be supported.

Fixed positioning makes the position of the element independent of the document flow, so it does not occupy space.

Fixed positioning elements overlap with other elements.


relative position

The positioning of the relative positioning element is relative to its normal position.

Example

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

 Try It! 

Move the relatively positioned element, but the space it originally occupies will not change.

Example

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

 Try It! 

Relatively positioned elements are often used as container blocks for absolutely positioned elements.


absolute position

The position of the absolutely positioned element is relative to the nearest positioned parent element. If the element does not have a positioned parent element, then its position is relative to <html>:

Example

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

 Try It! 

Absolute positioning makes the position of the element independent of the document flow, so it does not take up space.

The absolute positioned element overlaps with other elements.


sticky position

Sticky literally means sticky, paste, so it can be called sticky positioning.

position: sticky; Positing based on the user's scroll position.

Sticky positioning elements are dependent on the user's scrolling, switching between position: relative and position: fixed positioning.

It behaves like position: relative; and when the page scrolls beyond the target area, it behaves like position: fixed; and it will be fixed at the target position.

Element positioning is expressed as relative positioning before crossing a certain threshold, and fixed positioning afterwards.

This specific threshold refers to one of top, right, bottom or left. In other words, specify one of the top, right, bottom or left thresholds to make sticky positioning take effect. Otherwise, its behavior is the same as relative positioning.

Note: Internet Explorer, Edge 15 and earlier versions of IE do not support sticky positioning. Safari needs to use the -webkit- prefix (see the example below).

Example

div.sticky
{
    position: -webkit-sticky; /* Safari */
    position: sticky;    
    top: 0;    
    background-color: green;    
    border: 2px solid #4CAF50;
}

 Try It! 


Overlapping Elements

The positioning of elements has nothing to do with the document flow, so they can cover other elements on the page.

The z-index attribute specifies the stacking order of an element (which element should be placed before or after)

An element can have a stacking order of positive or negative numbers:

Example

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

 Try It! 

Elements with higher stacking order are always in front of elements with lower stacking order.

Note: If two positioning elements overlap and no z-index is specified, the last element positioned in the HTML code will be displayed first.


Examples

More Examples

Cut the shape of the element

This example demonstrates how to set the shape of an element. The element is cut into this shape and displayed.

How to use the scroll bar to display the overflowing content inside the element

This example demonstrates how the overflow attribute creates a scroll bar and how to set it to adapt when the content of an element is too large in the specified area.

How to set up automatic browser overflow handling

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

Change cursor

This example demonstrates how to change the cursor.


CSS Positioning Properties

The number in the "CSS" column indicates which CSS (CSS1 or CSS2) version defines the property.

PropertyDescriptionValueCSS
bottomDefines the offset between the lower margin boundary of the positioning element and the lower boundary of its containing block.auto
length
%
inherit
2
clipClip an absolutely positioned elementshape
auto
inherit
2
cursorDisplay the cursor moved to the specified typeurl
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
leftDefines the offset between the left margin boundary of the positioning element and the left boundary of its containing block.auto
length
%
inherit
2
overflow
Set what happens when the content of an element overflows its area.auto
hidden
scroll
visible
inherit
2
overflow-y
Specify how to handle the content of the top/bottom edge overflowing the element's content areaauto
hidden
scroll
visible
no-display
no-content
2
overflow-x
Specify how to handle the content of the right/left edge overflowing the element's content areaauto
hidden
scroll
visible
no-display
no-content
2
positionSpecify the positioning type of the elementabsolute
fixed
relative
static
inherit
2
rightDefines the offset between the right margin boundary of the positioning element and the right boundary of its containing block.auto
length
%
inherit
2
topDefines the offset between the upper margin boundary of a positioning element and the upper boundary of its containing block.auto
length
%
inherit
2
z-indexSet the stacking order of elementsnumber
auto
inherit
2