DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Fixed vs. Sticky: How to Define Elements in CSS
Patricia Cosma
Patricia Cosma

Posted on

Fixed vs. Sticky: How to Define Elements in CSS

While learning CSS, you will discover lots and lots of properties that will help you style great websites.

A good example, often used in CSS, is position property. This can take 5 different values: static, relative, fixed, absoluteand sticky. Today, we’ll explore the creation of fixed and sticky elements and how they behave on the page.

Prerequisites

In order to understand better this tutorial, you should be able to define what CSS is and how you can add CSS to your HTML.

It’s also good to have basic experience of working with a source-code editor, like Visual Studio Code, but that’s only up to you.

Structure

Open your preferred editor and create an HTML file, like structure.html. Start by typing ! and then click the Enter button (if you’re in VSC), otherwise just copy-paste this in your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed vs sticky</title>
</head>
<body>
    <!--code will come here-->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

After the title tag, link the CSS sheet to your HTML and create the style file, style.css.

<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

Next, we’re going to create two div elements. Within the first one, we’ll define the fixed element and within the second one, the sticky element.

<div class="example">
<div>

<div class="example">
<div>
Enter fullscreen mode Exit fullscreen mode

Having the basic structure of the page, let’s also add the basic styling needed in CSS before going to the next step.

body {
        /*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
    display: flex;
        /*feel free to set any other color of your choice*/
    background-color: grey; 
}

.example {
    width: 100%; 
}
Enter fullscreen mode Exit fullscreen mode

Fixed Element

In the first div created above, we’re going to add the structure to be designed with the fixed element.

<div class="example"> 
    <div class="box fixed">This is fixed</div>
    <div class="content one"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Switching to the CSS sheet, add the following code:

.content {
    background-color: blueviolet;
    height: 200px;
    margin: 1rem;
}

.content-one {
    height: 100px;
}

.box {
    width: 300px;
    height: 100px;
    background-color: aquamarine;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.fixed {
    position: fixed;
    top: 24px;
    left: 24px;
}
Enter fullscreen mode Exit fullscreen mode

Don’t worry - you won’t have so much to add for the sticky element too. The above-designed classes (except the last one) will define the next part of the project as well.

Sticky Element

For the second div, let’s define the code in our HTML file as follows:

<div class="example">
    <div class="content one"></div>
    <div class="content"></div>
    <!--placing the sticky box as third to better visualize the difference between the 2-->
    <div class="box sticky">This is sticky</div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Almost there!

Remember the whole CSS styling from the fixed element? If you take a look at that, you’ll notice that the common classes for the elements have been already defined.

All there’s left is to add the specific styling for .sticky.

.sticky {
    position: sticky;
    margin: 24px;
    top: 24px;
}
Enter fullscreen mode Exit fullscreen mode

Final Code

Aaaaaaand scene! Let’s see what we have created.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed vs sticky</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--structure of fixed-->
<div class="example"> 
    <div class="box fixed">This is fixed</div>
    <div class="content one"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

<!--structure of sticky-->
<div class="example">
    <div class="content one"></div>
    <div class="content"></div>
    <!--placing the sticky box as third to visualize the difference between these two-->
    <div class="box sticky">This is sticky</div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
body {
    display: flex; /*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
    background-color: grey; /*feel free to set any other color of your choice*/
}

.example {
    width: 100%; 
}

.content { /*these are properties for all the elements that have the class content*/
    background-color: blueviolet;
    height: 200px;
    margin: 1rem;
}

.content-one {
    height: 100px;
}

.box {
    width: 300px;
    height: 100px;
    background-color: aquamarine;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.fixed {
    position: fixed;
    top: 24px;
    left: 24px;
}

.sticky {
    position: sticky;
    margin: 24px;
    top: 24px;
}
Enter fullscreen mode Exit fullscreen mode

You have now a better understanding of how you can use the fixed and sticky elements in CSS. Play around with them to create a fixed menu or a sticky footer - the possibilities are endless.

Have fun! πŸŽ‰

πŸ‘‹πŸΌ You can check this tutorial and other projects here.


Cover photo by Jackson Sophat on Unsplash

Top comments (0)

19 Valuable Github Repositories for Beginners

19 Valuable GitHub Repositories for beginner devs looking to take the first step into the web development career.