CSS Position

The position property in CSS describes how an element or HTML item should be positioned.

In CSS, there are five different position property types available:

Absolute
Fixed
Relative
Static
Sticky

The top, right, bottom, and left properties can be used to position an element. These define the separation between an HTML element and the viewport's edge. We must declare the positioning technique in order to set the position using these four properties. Let's examine each of these positional techniques in greater detail:

Absolute:

An element with position: When an element's position is set to absolute, it will be located in relation to its closest Non-static ancestor. This element's placement is independent of its siblings or elements that are on the same level.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        position: relative;
        width: 300px;
        height: 150px;
        border: 2px solid #00ab55;
    }
    .ex2 {
        position: absolute;
        top: 50px;
        right: 25px;
        width: 150px;
        height: 75px;
        border: 2px solid #00ab55;
    }
</style>
</head>
<body>

<h2>The position: absolute; Property</h2>

<div class="ex1">position: relative;
    <div class="ex2">position: absolute;</div>
</div>

</body>
</html>

Preview

Fixed:

The position of any HTML element with the fixed property will be determined by the viewport. When an element has fixed positioning, it can stay in place even when the page is scrolled. The top, right, bottom, and left can be used to place an element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        height: 1000px;
    }
    .ex1 {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        border: 2px solid #00ab55;
    }
</style>
</head>
<body>

<h2>The position: fixed; Property</h2>

<div class="ex1">position: fixed;</div>

</body>
</html>

Preview

Relative:

Relative to the other components on top of it, an element with the attribute position: relative is positioned. Other elements won't fill the void created by this element even if we set its top, right, bottom, or left. When using top, bottom, left, or right to reposition an element whose position is set to relative, it will be positioned relative to its starting position.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        position: relative;
        left: 50px;
        border: 2px solid #00ab55;
    }
</style>
</head>
<body>

<h2>The position: relative; Property</h2>

<div class="ex1">position: relative;</div>

</body>
</html>

Preview

Static:

By default, this placement strategy is used. If we don't specify the positioning method for any element, the element's default positioning method is position: static. When an element is defined as static, the top, right, bottom, and left will have no influence over it. The element will be placed in line with the page's natural flow.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        position: static;
        border: 2px solid #00ab55;
    }
</style>
</head>
<body>

<h2>The position: static; Property</h2>

<div class="ex1">position: static;</div>

</body>
</html>

Preview

Sticky:

Based on its placement, the element with the properties position: sticky and top: 0 played a part in both fixed and relative behavior. If the element is positioned in the middle of the document, it will scroll until it reaches the top when the user scrolls the document. When it reaches the top, it will remain there no matter how far you scroll. By using the bottom property, we may position the element at the bottom.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        height: 2000px;
    }
    .ex1 {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        padding: 10px;
        border: 2px solid #00ab55;
    }
</style>
</head>
<body>

<h2>The position: sticky; Property</h2>

<div class="ex1">position: sticky;</div>

</body>
</html>

Preview

FAQs

The position property's initial value is static. When an element's position property is set to static, it is positioned according to the normal flow of the document and cannot be moved using the top, bottom, left, or right properties.

The position property in CSS allows you to position an element relative to its containing block or to the viewport. It affects the layout and flow of a document by changing how elements are positioned and interact with each other on the page. For example, with static positioning, elements flow in the natural order of the document and are positioned according to the normal flow of the document. With relative positioning, elements are shifted from their normal position based on the top, bottom, left, and right properties. Fixed and absolute positioning remove elements from the normal flow of the document and position them relative to the viewport or nearest positioned ancestor, respectively.

The position property interacts with other layout properties in various ways. For example, setting an element's position to absolute or fixed removes it from the normal document flow, which can affect the positioning of other elements. The float property can also affect the position of elements, especially when combined with the clear property. Additionally, the display property can affect the behavior of the position property, as certain values of display may prevent an element from being positioned using top, bottom, left, or right.

CSS Max-width

CSS Z-index

CSS Position

Absolute:

Example

Fixed:

Example

Relative:

Example

Static:

Example

Sticky:

Example

FAQs

Links

Tutorials

Connect with us

CSS Position

Absolute:

Example

Fixed:

Example

Relative:

Example

Static:

Example

Sticky:

Example

FAQs

What is the position property's initial value?

How does the position property affect the layout and flow of a document?

How does the position property interact with other layout properties such as display, float, and clear?