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 positioning

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: 3 px solid #73AD21;
 }

fixed positioning

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

It will not move even if the window is scrolling:

Example

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

Note: Fixed positioning needs to be described under IE7 and IE8! 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 positioning

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

Example

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

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

Example

h2 .pos_top { 
	position: relative;
	Top: -50 PX;
}

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

absolute positioning

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: 100 px;
	top: 150 px;
}

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 positioning

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

position: sticky; Positioning 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 -webkit- prefix (see the example below).

Example

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

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: 0 px;
	top: 0 px;
	Z-index: -.1;
}

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.

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 scroll bars to display overflowing content within an 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.

All CSS positioning properties

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

Attributes Description value CSS
bottom Defines the offset between the lower margin boundary of the positioning element and the lower boundary of its containing block. auto
length
%
inherit
2
clip Clip an absolutely positioned element shape
auto
inherit
2
cursor Display the cursor moved to 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 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 area of ​​the top/bottom edge overflowing the element’s content auto
hidden
scroll
visible
no-display
no-content
2
overflow-x Specify how to handle the content area of ​​the right/left edge overflowing the element’s content area auto
hidden
scroll
visible
no-display
no-content
2
position Specify the positioning type of the element absolute
fixed
relative
static
inherit
2
right Defines the offset between the right margin boundary of the positioning element and the right boundary of its containing block. auto
length
%
inherit
2
top Defines the offset between the upper margin boundary of a positioning element and the upper boundary of its containing block. auto
length
%
inherit
2
z-index Set the stacking order of elements number
auto
inherit
2