How to Create Fixed Elements with CSS

| Coding Tutorials
How to Create an Sticky Element with CSS

The CSS position property defines the type of positioning for an HTML element on a website.

If you want to position an HTML element so that it is always in the same place on the page (even as a user scrolls down), you can use fixed positioning.

In this tutorial, I'm going show you how to display fixed elements.

Step #1. The HTML

Add this code in your site:

<div class="block">
    Some content goes here.
</div>

In my example I will add a bunch of dummy text from the Lorem Ipsum site.

Step #2. The CSS

Load the CSS code below into your site:

.block {
    position: fixed;
}

Let’s add more CSS properties to make the block easily visible:

.block {
    position: fixed;
    background: #2184cd;
    color: #fff;
    padding: 20px;
    width: 400px;
}

Step #3. The end result

Open your site in the browser. The div will be visible in exactly the same position, even if you scroll down:

position fixed CSS

View demo


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.