Styling static relative absolute fixed sticky position in CSS

Position property in CSS

Positioning of an element appropriately on your web page is very much necessary so that you have an attractive web page. To make your web page better, CSS provides a facility of positioning the elements. Let us now style static relative absolute fixed sticky position in CSS. There are several methods to set position of an element on your web page.

  • static (default position)
  • relative position
  • absolute position
  • fixed position
  • sticky position

Elements are 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 position value.

static position in CSS

A static position of an element in CSS is always positioned as per normal flow of page. The elements are positioned static by default. The elements which are positioned static do not get affected by top, right, bottom and left properties.

relative position in CSS

In relative position, the elements are positioned relative to the normal position of an element. The element which is inserted without using any positioned property is its normal position or normal position of an element is its raw position. When an element is shifted with respect to its normal position, we get relative position of that element. This can be achieved by using top, right, bottom and left properties of an element. Let us write a code to understand relative position of an element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position of an element</title>
    <style>
        .container
        {
            border:3px solid red;
            width:45%;
            margin:auto;
        }
        div.posbox{
            display:inline-block;
            border:2px solid green;
            height:150px;
            width:150px;
            margin:3px;
        }
        div#posbox2{
            position:relative;
            top:170px;
            left:50px;
        }
        h3{
        text-align:center;
        }
    </style>
</head>
<body>
    <h3>Example of box with relative position</h3>
    <div class="container">
        <div class="posbox" id="posbox1">Box1</div>
        <div class="posbox" id="posbox2">Box2</div>
        <div class="posbox" id="posbox3">Box3</div>
        <div class="posbox" id="posbox4">Box4</div>
    </div>
</body>
</html>
relative position in css, www.programmingtutorialin

In this example, the normal position of Box2 is between Box1 and Box3. When we apply position property as relative with top:170px and left 50:px, to Box2, it shifts from its normal position to its new position after satisfying top and left values. It is clear from the example that, Box2 has changed its position with respect to its normal position. It has been observed from above example’s output, Box2 has left an empty space on its normal position.

You may also like to read

What are pseudo elements in CSS?

absolute position in CSS

An absolute positioned element is positioned with respect to a parent element which is also positioned other that static. This also means, if you want to shift your element away from its parent element, then its parent should also be positioned first. If the parent element is not positioned, then absolute position will work with respect to top-left corner of browser.

When an absolute positioned element is taken out of the normal flow, it will not create an empty space which was earlier created in relative positioned element. Let us write a code now to better understand the concept of absolute position.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position of an element</title>
    <style>
        .container
        {
            border:3px solid red;
            width:45%;
            margin:auto;
            position:relative;
        }
        div.posbox{
            display:inline-block;
            border:2px solid green;
            height:150px;
            width:150px;
            margin:3px;
        }
        div#posbox2{
            position:absolute;
            top:170px;
            left:50px;
        }
        h3{
        text-align:center;
        }
    </style>
</head>
<body>
    <h3>Example of box with absolute position</h3>
    <div class="container">
        <div class="posbox" id="posbox1">Box1</div>
        <div class="posbox" id="posbox2">Box2</div>
        <div class="posbox" id="posbox3">Box3</div>
        <div class="posbox" id="posbox4">Box4</div>
    </div>
</body>
</html>
absolute position in CSS, www.programmingtutorial.in

In this example, we have parent element which is named as container. Box2 has been shifted with respect to parent element with top:170px and left:50px. It has also been observed from above output that Box2 has been shifted from its normal position without leaving behind an empty space which was created above in relative position.

fixed position in CSS

The fixed position property works in a similar fashion as absolute position works except one change, it works with respect to viewport’s top-left. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located. Let us write its code and understand its concept:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position of an element</title>
    <style>
        .container
        {
            border:3px solid red;
            width:45%;
            margin:auto;
        }
        div.posbox{
            display:inline-block;
            border:2px solid green;
            height:150px;
            width:150px;
            margin:3px;
        }
        div#posbox3{
            position:fixed;
            top:200px;
            left:150px;
        }
        h3{
        text-align:center;
        }
    </style>
</head>
<body>
    <h3>Example of box with fixed position</h3>
    <div class="container">
        <div class="posbox" id="posbox1">Box1</div>
        <div class="posbox" id="posbox2">Box2</div>
        <div class="posbox" id="posbox3">Box3</div>
        <div class="posbox" id="posbox4">Box4</div>
    </div>
</body>
</html>
fixed position in CSS, www.programmingtutorial.in

sticky position in CSS

The element with position styled as sticky works like position relative and position fixed. It is positioned based on user’s scroll position. Element with position: sticky and top: 10 plays a role between fixed & relative, based on the position where it is placed. If the element is placed at the middle of the document then, when user scrolls the document, the sticky element starts scrolling until it touches the top. When it touches the top, it will be fixed at that place instead of further scrolling. We can stick the element at bottom, with the bottom property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position of an element</title>
    <style>
        .container
        {
            border:3px solid red;
            width:45%;
            margin:auto;
            height:1000px;
        }
        div.posbox{
            display:inline-block;
            border:2px solid green;
            height:150px;
            width:150px;
            margin:3px;
        }
        div#posbox1{
            position:relative;
            top:400px;
        }
        div#posbox2{
            position:relative;
            top:300px;
        }
        div#posbox3{
            position:sticky;
            top:10px;
        }
        div#posbox4{
            position:relative;
            top:300px;
        }
        h3{
        text-align:center;
        }
    </style>
</head>
<body>
    <h3>Example of box with sticky position</h3>
    <div class="container">
        <div class="posbox" id="posbox1">Box1</div>
        <div class="posbox" id="posbox2">Box2</div>
        <div class="posbox" id="posbox3">Box3</div>
        <div class="posbox" id="posbox4">Box4</div>
    </div>
</body>
</html>
sticky position in CSS, www.programmingtutorial.in

In above example Box1, Box2 and Box4 are positioned as relative with different top value. The Box3 is positioned with sticky property with top:10px. Now when you scroll this page, all the boxes will disappear as they touch the top except the Box3 which is positioned as sticky.

We have learnt styling static relative absolute fixed sticky position in CSS.