Fixed vs. Sticky: How to Define Elements in CSS
Tags: css, webdev, beginners, html
Published: 2022-11-29 19:13:57

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`, `absolute `and `sticky`. Today, we’ll explore the creation of `fixed` and `sticky` elements and how they behave on the page.
<br>

### 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](https://code.visualstudio.com/), but that’s only up to you.
<br>

### 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.

```html
<!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>
```

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

```html
<link rel="stylesheet" href="style.css">
```

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.

```html
<div class="example">
<div>

<div class="example">
<div>
```

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

```css
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%; 
}
```
<br>

### Fixed Element

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

```html
<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>
```

Switching to the CSS sheet, add the following code:

```css
.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;
}
```

***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.
<br>

### Sticky Element

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

```html
<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>
```

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`.

```css
.sticky {
    position: sticky;
    margin: 24px;
    top: 24px;
}
```
<br>

### Final Code

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

```html
<!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>
```

```css
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;
}
```

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](https://github.com/patricia-cosma).



---

_Cover photo by <a href="https://unsplash.com/@jacksonsophat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jackson Sophat</a> on <a href="https://unsplash.com/s/photos/html-css?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_