CSS Position Property

Understanding CSS Position Property

The position property specifies the type of positioning method used for an element.

The five values of the position property are:

  • static
  • relative
  • fixed
  • absolute
  • sticky

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.

Static Positioning

The default value for HTML elements. Elements are positioned according to the normal flow of the document.

Static positioned elements are not affected by the top, bottom, left, and right properties.

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

Fixed Positioning

An element with fixed positioning is positioned relative to the browser window. It will not move even when the window is scrolled:

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

Note: Fixed positioning requires a specified !DOCTYPE to work in IE7 and IE8.

Fixed positioning removes the element from the document flow, so it does not occupy space. Fixed positioned elements overlap other elements.

Relative Positioning

An element with relative positioning is positioned relative to its normal position.

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

Moving a relatively positioned element changes its position but leaves the space it originally occupied unchanged.

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

Absolute Positioning

An element with absolute positioning is positioned relative to the nearest positioned ancestor. If no positioned ancestor exists, it is positioned relative to the document body.

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

Absolute positioning removes the element from the document flow, so it does not occupy space. Absolute positioned elements overlap other elements.

Sticky Positioning

The sticky value is a hybrid of relative and fixed positioning. An element with sticky positioning is treated as relative until it crosses a specified threshold, at which point it is treated as fixed.

The element switches between relative and fixed positioning based on the user's scroll position.

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

Note: Internet Explorer, Edge 15, and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix.

Overlapping Elements

Positioned elements can overlap others. The z-index property specifies the stack order of elements (which element should be in front or behind).

An element can have a positive or negative stack order:

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

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

Note: If two positioned elements overlap without a specified z-index, the last positioned element in the HTML code will be displayed on top.

All CSS Positioning Properties

Property Description Values CSS
bottom Defines the bottom offset of a positioned element. auto, length, %, inherit 2
clip Clips an absolutely positioned element. shape, auto, inherit 2
cursor Specifies the type of cursor to be displayed. 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 left offset of a positioned element. auto, length, %, inherit 2
overflow Specifies what happens if content overflows an element's box. auto, hidden, scroll, visible, inherit 2
overflow-y Specifies the handling of overflow content at the top/bottom of an element. auto, hidden, scroll, visible, no-display, no-content 2
overflow-x Specifies the handling of overflow content at the right/left of an element. auto, hidden, scroll, visible, no-display, no-content 2
position Specifies the type of positioning method used for an element. absolute, fixed, relative, static, inherit 2
right Defines the right offset of a positioned element. auto, length, %, inherit 2
top Defines the top offset of a positioned element. auto, length, %, inherit 2
z-index Sets the stack order of a positioned element. number, auto, inherit 2

More Examples

Clipping an Element

This example demonstrates how to clip an element into a specific shape and display it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
img {
    position: absolute;
    clip: rect(0px, 60px, 200px, 0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>

Using Overflow to Handle Content

This example demonstrates how to use the overflow property to create a scrollbar when content overflows an element's box.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}
div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}
div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}
div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow Property</h1>
<p>The overflow property determines what happens if content overflows an element's box.</p>
<h2>overflow: scroll:</h2>
<div class="ex1">Content that exceeds the specified box size will create a scrollbar.</div>
<h2>overflow: hidden:</h2>
<div class="ex2">Content that exceeds the specified box size will be hidden.</div>
<h2>overflow: auto:</h2>
<div class="ex3">Content that exceeds the specified box size will create a scrollbar if necessary.</div>
<h2>overflow: visible (default):</h2>
<div class="ex4">Content that exceeds the specified box size will overflow the box.</div>
</body>
</html>

Automatic Overflow Handling

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
<style>
div {
    background-color: #00FFFF;
    width: 150px;
    height: 150px;
    overflow: auto;
}
</style>
</head>
<body>
<p>The overflow property specifies what happens if content overflows an element's box.</p>
<div>
Content that exceeds the specified box size will be handled automatically by the browser. Try changing the overflow property to visible, hidden, scroll, or inherit to see the effect.
</div>
</body>
</html>

Changing the Cursor

This example demonstrates how to change the cursor style.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Webcode101(webcode101.com)</title> 
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>