CSS Positioning
Tags: beginners, css
Published: 2019-11-07 22:27:51

---
title: CSS Positioning
published: true
description: A beginners guide to the world of CSS positioning
tags: beginners, css
series: FrontEnd Development Zero to Hero
---
Hold your position!. We cool? Now, Let's talk about CSS positioning.

One of the things that help you (the developer) to design the layout you planned out for a web project is positioning, where elements will fit on a page and what happens to their  surrounding elements.

CSS positioning is quiet a tricky thing and might take you a while to understand (like me). The aim of this post is to explain it in a way that it's easy to comprehend. We'll write code (no doubt about that) and the resulting images in the _browser_ and _Developer Tools_ should help you get a better picture of this entire concept of _Positioning_.

Positioning in CSS include:

* Static Positioning
* Relative Positioning
* Absolute Positioning
* Fixed Positioning
* Sticky Positioning

From the list above you should know that _relative_ and _absolute positioning_ are the most used positioning techniques and when you find an _article_ or _blog post_ on the internet discussing CSS positioning, they'll mostly talk about these duo.

![Search Result for CSS positioning on Google.com](https://thepracticaldev.s3.amazonaws.com/i/4xebpyiazcg53rf7u6m1.PNG)

Before we proceed, i will like to mention that the CSS `position` property sets how an element is positioned in a document.

_The following HTML and CSS will be used to demonstrate the positioning techniques in this post, please copy and save them with the `.html` and `.css` extension and make sure the CSS is linked with the HTML._

```html
<div class="parent">
  <div class="child"></div>
</div>
```
```css
/* To be the best of my knowledge, i believe we've discussed
 * all the properties in the CSS rules. The only property that
 * you may find foreign is the background-color and the color
 * format rgb(), we'll talk about them in the series, i think under
 * CSS Colors.
 */
.parent {
  margin-top: 32px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 32px;
  background-color: rgb(200,200,200);
  width: 500px;
  height: 200px;
}

.child {
  margin-top: 30px;
  margin-right: 20px;
  margin-bottom: 50px;
  margin-left: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}
```
<center><small>_Margin Collapsing will occur with this code, can you see it?_</small></center>

####__STATIC POSITIONING__
This is the default position of most element and they are not affected by offset properties like `top`, `right`, `bottom` or `left`.

Load your HTML in your browser, use "Inspect Element" on the _red box_ and navigate to the _Box Model_ (_i believe that by now you should be able to do this_).

You should get an output similar to the image below, and i have highlighted the position status of the box.

![Static positioning in CSS](https://thepracticaldev.s3.amazonaws.com/i/u6txhsye49xbfui4leuo.PNG)

####__RELATIVE POSITIONING__
Before we dive in and explain what _relative positioning_ is all about in CSS, we need to know the meaning of the term _relative_.

From [Lexico dictionary]( https://www.lexico.com/en/definition/relative), when we use the term relative it means it's:

> Considered in relation or in proportion to something else.

The definition speaks volumes and it's quite the way _relative positioning_ works in CSS. 

Relative positioning is the ability to position a page element relative to its parent. This definition might be basic, let's see what the [Mozilla Developer Network]( https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning) has to say on this subject (emphasis mine):

> A relatively positioned element is an element whose computed* `position` value is `relative`. The `top` and `bottom` properties specify the __vertical offset from its normal position__; the `left` and `right` properties specify the __horizontal offset__.

<center><small>_*The computed value of a CSS property is the value that is transferred from parent to child during inheritance. We've talked about [css inheritance.](https://dev.to/ziizium/css-inheritance-3pi1)_</small></center>

__This translates to__: When you use _relative positioning_ to position an element, the element will be moved from its normal position either vertically or horizontally depending on the properties used.

Update the `.child` CSS rule with the following:

```css
.child {
  /* Other properties remain the same */

  left: 1.2em;
}
```

The box will now move a little bit to the right of the screen, and if you check the _Box Model_ you will notice that the browser has added some details that indicate that you've positioned the element.

![Positioned Element in CSS](https://thepracticaldev.s3.amazonaws.com/i/il3dbusq83gapvkcbg2b.PNG)

Now let's the move the box a little bit down the screen, we will achieve this by using the `top` property. Add this to your `.child` CSS rule just below the `left` property:

```css
.child {
  /* Other properties remain the same */

  top: 1.2em;
}
```

Save and refresh your browser. Navigate to the _Box Model_ and _click on the icon_ beside the word '_relative_' in the previous image, this will show you the `top` and `left` values that the element is using in its new position.

![A page element positioned with CSS top and left properties](https://thepracticaldev.s3.amazonaws.com/i/l94i0hrk4uu8dsg22rie.PNG)

Now let's move the box to the top of its container. This can be achieved with the `bottom` property and we can add either `right` or `left` to show that it moves.  __Delete the `left` and `top` values__ then add the following:

```css
.child {
  /* Other properties remain the same */

  right: 1.6em;
  bottom: 1.4em;
}
```

Refresh your browser, and _click on the icon_ beside the '_relative_' in the _Box Model_, the coordinates of the box will be shown.

![Coordinates of a Page Element positioned with CSS](https://thepracticaldev.s3.amazonaws.com/i/f3fy4vhiop25q55orjol.PNG)

Mind you if you use _two properties that move an element in one direction_, horizontally or vertically only _one value will apply_.

For example, if you move an element using both the `left` and `right` property _only the `left` property will apply_. To see this in action, __delete the `right` and `bottom`__ properties in the `.child` rule then add the following:

```css
.child {
  /* Other properties remain the same */

  left: 2.5em;
  right: 120.6em;
}
```

Save your file, and refresh your browser, you will realize only the `left` property is applied and the box moves in the right direction.

![Page element moved in the right direction with CSS positioning](https://thepracticaldev.s3.amazonaws.com/i/rxy6k2lzxdonyzgoymbf.PNG)

And you can confirm this by clicking the icon beside the word '_relative_' in the _Box Model_.

![The effect of CSS left property on a page element](https://thepracticaldev.s3.amazonaws.com/i/ia7j41avao2drwf0pn3b.PNG)

But, the browser shows your `right` property value in the _Box Model_.

![The value of the CSS right property shown in the Box Model](https://thepracticaldev.s3.amazonaws.com/i/rkcizx12y3isngwfwcyn.PNG)

Likewise if you move an element with the `top` and `bottom` value, _only the `top` property will apply_. If you have the `left` and `right` property declaration in your CSS, __delete them__ (for now) and update your `.child` rule with the following:

```css
.child {
  /* Other properties remain the same */

  top: 1.2em;
  bottom: 2.4em;
}
```

Save your file and refresh your browser, you will realize the box just moved from the top a little bit. And you can confirm this by _clicking the icon_ beside the word '_relative_' in the _box model_.

![A page element moved from the top of its parent with CSS](https://thepracticaldev.s3.amazonaws.com/i/btkxrwoga6j6ppptltcj.PNG)

This tells us that in order to effectively move a page element we should _combine properties_ that move an element in the _vertical&#x2014;horizontal_ direction (`top`, `bottom` with `right` or `left`) and not _vertical&#x2014;vertcal_(`top`, `bottom`) nor _horizontal&#x2014;horizontal_ (`left`, `right`).

Before we proceed, we should talk about __offset__ introduced in the definition of _relative positioning_ taken from Mozilla Developer Network, i will have explained it earlier, but it might complicate things before all the preceding demonstrations and examples. But now, we can talk about it because it'll come in handy in explaining other positioning techniques.

Take a look at the _Box model_ from the image below, you will observe under the `position` in the _Box Model Properties_ it reads `offset` (in a blue background) and `body`, if you _hover your mouse_ over the `offset` it says "_Offset parent of the selected element_" in this case it's the `body` element.

![The Box model showing the offset parent of a selected element](https://thepracticaldev.s3.amazonaws.com/i/wtnktg2zvrumczcpksj4.PNG)

If you _hover your mouse_ over the `body` element, it will be highlighted on the web page.

![HTML body element highlighted on a web page with Developer Tools](https://thepracticaldev.s3.amazonaws.com/i/ce2voa9ikt3wffegsn8t.PNG)

This means the element has been _positioned relative to the `body` element_ and __not its actual parent__ which is the `div` element with the `.parent` class.

Why? This is because most element have a default positioning of `static`, and offset properties like `top`, `right` has no effect on element with `static` positioning and if you observe carefully our `div` element has a position of `static`.

![HTML div element with static positioning](https://thepracticaldev.s3.amazonaws.com/i/685rdc8thtxhyrrq7c1n.PNG)

So, when we performed _relative positioning_ on `.child`, the browser figured out that the `div` element had a  _static positioning_ and it will default to the `body` element. But, __what happens if there is no `body` element in the document__? The browser will add opening and closing `body` tags and the positioning will still default to the added `body` element.

You can confirm this by commenting the opening and closing `body` tag in your HTML.

![The web browser adding the HTML body element](https://thepracticaldev.s3.amazonaws.com/i/s05sit9utfklifnjno1s.PNG)

We can fix this entire situation by making sure our `.parent` has a _relative positioning_. Add the following to the `.parent` class:

```css
.parent {
  /* Other properties remain the same */

  position: relative;
}
```

Save your file and refresh the browser, you will notice the changes under _Box Model Properties_.

![An element with relative positioning](https://thepracticaldev.s3.amazonaws.com/i/dr30o8vm0l4ylja7384b.PNG)

Now it gets interesting, __delete the `top` and `bottom` properties__ in the `.child` CSS rule then add the following: 

```css
.child {
  /* Other properties remain the same */

  right: 5em;
}
```

Save and refresh your browser you will realize that the box will move out of its parent container (the `div` element).

![A page element moved out of its parent container](https://thepracticaldev.s3.amazonaws.com/i/er34licusvilnuj2rq9v.PNG)

If you are pleased with this effect, fine by me. But if you want the box to remain within its parent container, add the following to the `.parent`

```css
.parent{
  /* Other properties remain the same */

  overflow: auto;
}
```

The `overflow` help controls what will happen when a child element exceeds the boundary of its parent element, in this case we set it to `auto`, it accepts other values like `scroll`, `visible` and  `hidden`.

Save your file and refresh your browser, use "Inspect Element" on the _red box_ and view the _Box Model_. _Click on the icon_ beside the word '_relative_', you should get an output similar to the image below.

![A child element contained within its parent element using CSS overflow property](https://thepracticaldev.s3.amazonaws.com/i/xdac8tfeok3tsmikcx15.PNG)

The box is now contained in its parent. The `overflow` will come in handy in situations when you want a child element to stick to its parent container. You will see it in action when we explain the [_CSS Block Formatting Context_](https://dev.to/ziizium/css-block-formatting-context-13ol) and in the _Final Project_.

That's it for _relative positioning_, let's proceed to _absolute positioning_

####__ABSOLUTE POSITIONING__
From the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning)(emphasis mine):

> An absolutely positioned element is an element whose computed `position` value is `absolute` or `fixed`. The `top`, `right`, `bottom`, and `left` properties specify offsets __from the edges of the element's containing block.__ (The _containing block is the ancestor relative to which the element is positioned._) If the element has margins, they are added to the offset

The emphasized sentence above is telling  us that we can position an element precisely where we want it _in its containing block_. The containing block can be the element's parent element or the web page itself. Say what?

Here is the thing, absolute positioning is done relative to the first _relatively_ or _absolutely_ positioned parent element and if the parent element is not relatively positioned, it will be positioned related directly to the page itself.

The question now is: _How can we relatively position the parent element_?

You already know the answer!. By adding the `position: relative` to the parent CSS rule. Let's code.

We will be using the same CSS and HTML from previous explanations, but you've got some clean up and modifications to do. Let your CSS and HTML match the snippet below.

```html
<div class="parent">
  <div class="child"></div>
</div>
```
```css
.parent {
  margin-top: 32px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 32px;
  background-color: rgb(200,200,200);
  width: 500px;
  height: 400px;
  position: relative; /* Note this */
}

.child {
  width: 120px;
  height: 120px;
  background-color: #1560bd;
}
```

Save your files, and view the _Box Model_ of the parent element, you can confirm that it has a _relative_ position.

![A relative positioned element](https://thepracticaldev.s3.amazonaws.com/i/hkv3wzsfo2zru7y0og6z.PNG)

Add the following to the CSS rule of the `.child`:

```css
.child {
  /* all other properties remain the same */
 
  position: absolute; /* for absolute positioning */
}
```

Save your file and confirm it has an _absolute_ position in the _Box Model_:

![An HTML element positioned with CSS absolute property value](https://thepracticaldev.s3.amazonaws.com/i/xtv4f3f5vwqa4yti79hq.PNG)

Now lets move some stuff. Update the CSS rule of the `.child` with the following:

```css
.child {
  /* all other properties remain the same */
 
  top: 5em;
  left: 15em;
}
```

This is will move the _blue box_  just across the center of  its parent.

Save your file and refresh your browser. View the _Box Model_ and _click the icon_ beside the word '_absolute_', the position of the box will be shown.

![A positioned element with the absolute property value](https://thepracticaldev.s3.amazonaws.com/i/4kgep9z9egbyvrn8h84j.PNG)

Let's move the box to another location, __delete the `top` and `left` properties__ from the `.child` CSS rule then add the following:

```css
.child {
  /* all other properties remain the same */
 
  bottom: 3em;
  left: 2em;
}
```

Save and refresh your browser then view the position of the box.

![A positioned element with the absolute property value](https://thepracticaldev.s3.amazonaws.com/i/tvo05cj2c7jpznprvye4.PNG)

Now some _exercises_ for you.

Using combinations of the offset properties (`left`, `right`,`bottom`, `top`), write the property declarations that will move the box to the positions depicted in the following images.

#####__EXERCISE 1__
![A positioned element with the absolute property value](https://thepracticaldev.s3.amazonaws.com/i/zwguupmefhf6sb623fua.PNG)

#####__EXERCISE 2__
![A positioned element with the absolute property value](https://thepracticaldev.s3.amazonaws.com/i/h500gl2trqvt8u1bs1dd.PNG)

#####__EXERCISE 3__
![A positioned element with the absolute property value](https://thepracticaldev.s3.amazonaws.com/i/1u0gfy6mthjrb7lw9yt9.PNG)

_Did you figure it out? Show your answer in the comments_.

####__FIXED POSITIONING__

The name of this positioning technique should give away its behavior. It allows you to position an element to a fixed spot on the web page. 

It's similar to absolute positioning  with the exception that the element's _containing block_ is the initial containing block established by the _viewport_ __*__.

<center><small>_*The viewport is basically the available browser window._</small></center>


This means when you set the position of an element as `fixed`, the parent container is the _available browser window_. Now you might ask, _Why not its parent element_? That's how _fixed positioning_ works. Let's code to see what it's all about.

One of the best way to see this positioning in action is to have enough content in a parent container that will allow us to scroll and we'll notice the fixed element does not move with the rest of the parent's content.

Do some house keeping and let your HTML and CSS match the following and don't forget to save your files.

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

  <div class="child"></div>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
```
```css
.parent {
  width: 500px;
  height: 400px;
  margin: 2em auto;
  background-color: #dddddd;
}

.child {
  width: 100px;
  height: 100px;
  background-color: #1560bd;
}
```

Refresh your browser. Your output should be similar to the image below.

![fixed positioning in CSS](https://thepracticaldev.s3.amazonaws.com/i/epqdcefoyc82cdjeelpx.png)

Next we need to create an environment that will allow us to scroll content of the parent element, we can use the `overflow` property to achieve this (we talked about`overflow` in relative positioning). 

The `overflow` property accepts values like `auto`, `hidden`, `scroll`, `visible`. The value we'll use is `scroll`. Add the following to your `.parent` CSS rule:

```css
.parent {
  /* All other properties remain the same */

  overflow: scroll;
}
```

Save and refresh. You will notice a scroll bar has been added to the parent container. 

![Scroll bar added to an element by the browser](https://thepracticaldev.s3.amazonaws.com/i/fli79lb4s0oyqtm2yw5x.png)

If you scroll, everything moves including the box. Let's change that. Add the following to the `.child` CSS rule and save your file.

```css
.child {
  /* All other properties remain the same */

  position: fixed;
}
```

You will notice that some text are now behind the _blue box_ and if you scroll through the parent, the box does not move.

![Fixed positioning in CSS](https://thepracticaldev.s3.amazonaws.com/i/x93osffhm0zolfys61gl.png)

Now let's give the box its own space to breath. Remember its a child of `.parent`, and we can get this space  by _creating an internal spacing_ inside the `.parent`. Can you guess what this internal spacing is? Its the _Padding_.

We can create the internal spacing anywhere we desire inside the parent. We'll create this space at the left side. You should get a feeling of the property we'll have to use. The `padding-left` with a value that will give the box some space to occupy without interfering with the text.

Add the following to your `.parent` class and save your file.

```css
.parent {
  /* All other properties remain the same */

  padding-left: 150px;
}
```

The resulting image in the browser:

![Padding-left applied to an element](https://thepracticaldev.s3.amazonaws.com/i/fp4rs97p4505801yttez.png)

Now, we need to move the box. Add the following to the`.child`

```css
.child {
  /* All other properties remain the same */

  top: 80px;
  left: 10px;
}
```

Save. Refresh your browser and BAM!.

![An element moving out of its parent container](https://thepracticaldev.s3.amazonaws.com/i/5nttsdb2gncfns840avv.png)

What just happened? Remember:

> when you set the position of an element as `fixed` the __parent container is the browser window__

That's exactly what happened when you positioned the box, its parent is now the browser window or _viewport_.

The _internal spacing_ we created earlier for the box is still empty because of the box's current position. In order to make the box take up this  space, we will have to send the parent to the browser's edge by eliminating its `margin` property.

__Delete__ the __`margin: 2em auto;`__ from the `.parent`. Save and refresh your browser. The parent will move to the left of the screen and the _blue box_ will now occupy the space we created earlier.

![A fixed element on a web page](https://thepracticaldev.s3.amazonaws.com/i/ozqqs7oi2m42rzndu6z9.png)

When you scroll, the box wont move and it'll appear to be in relation to the `.parent`. But we should know it's in _relation to the browser window_. To prove this is the case, lets add a border to the ` html ` element and the `.parent` CSS rule. Your CSS should be similar in structure like the snippets below.

```css
html {
  border: 3px solid gold; /* add this */
  padding: 1.2em;         /* add this */
}

.parent {
  /* all prperties remain the same*/

  border: 5px solid #ea3c53; /* add this */
}

.child {
  /* properties remain unchanged */
}
```

Save and refresh your browser, view the _Box Model_ and  _click on the icon_ beside the word '_fixed_', you will notice in the browser window that the coordinate of the box position is touching the window edges which is the `html` element and not `.parent` 

![HTML elements with border applied](https://thepracticaldev.s3.amazonaws.com/i/8gsnbq999pkb35k3bbbl.PNG)

If you want to have some fun, perform relative positioning on the `.parent` and `.child` and save your file. Then perform the normal steps of viewing the box's coordinates in the _Box Model_, you will notice the coordinate lines are now touching the `.parent` and not the `html` element.

![HTMl elements with border applied](https://thepracticaldev.s3.amazonaws.com/i/n5x0bf8k049jxyga9ro8.PNG)

####__STICKY POSITIONING__

Sticky, sticky, sticky. I think the name is enough to tell you the nature of this positioning technique. Do we need to explain? ....... Fine Let's explain.

[Mozilla Developer Network]( https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning) explains (emphasis mine):

> Sticky positioning can be thought of as a __hybrid of relative and fixed positioning__. A __stickily positioned element is treated as relatively positioned__ until it __crosses a specified threshold__, at which point it is __treated as fixed__ until it __reaches the boundary of its parent__

There you go, i think that's straight forward but let's code.

We'll be using the previous HTML with a slight modification.

```html
<!-- Add this before <div class="child"></div> -->

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<!-- other content remains unchanged -->

```

And  new CSS rules.

```css
.parent {
  width: 500px;
  height: 400px;
  margin: 2em auto;
  background-color: #dddddd;
  position: relative; /* relatively positioned the element */
}

.child {
  width: 100px;
  height: 100px;
  background-color: #1560bd;
}
```

Save your file and refresh your browser.

![A blue box and some text on a silver background](https://thepracticaldev.s3.amazonaws.com/i/z3zzm5385zxkodt2513f.png)

Next we have to enable scrolling  on the `.parent`, so that we can see the effect of the sticky position when it's applied.

Update your  `.parent` with the following

```css
.parent {
  /* All other properties remains the same */

  overflow: scroll; /* to enable scrolling */
}
```

Save your file and refresh your browser. This should enable scrolling in the `.parent`.

![A page element with scroll bars](https://thepracticaldev.s3.amazonaws.com/i/h1vs7uwb4jmiyfv3eayp.png)

Next, we'll make the `.child` sticky. Add the following to your `.child`:

```css
.child {
  /* All other properties remains the same */

  position: sticky; /* make it sticky */
}
```

Save your file and refresh your browser. When you scroll you'll notice the box will still move out of view.

![A box moved out view in its parent element](https://thepracticaldev.s3.amazonaws.com/i/zih5tnx1zr20j05olok4.PNG)

Why is this happening? MDN to the rescue:

> You __must specify a threshold__ with at least one of `top`,` right`, `bottom`, or `left` for sticky positioning to behave as expected. Otherwise, __it will be indistinguishable from relative positioning.__

This is telling us that after giving an element the `position: sticky;` we must specify an `offset` for it work, otherwise it'll behave the same like a relatively positioned element. Let's fix that.

Add the following to your `.child` CSS rules:

```css
.child {
  /* All other properties remains the same */

  top: 50px; /* this will move the box down the screen by 50px */
}
```

Save your file and refresh your browser. If you scroll through `.parent`, when you get to the _blue box_ , it won't scroll out of view. It'll appear to snap out of its position and then fixed.

![A sticky page element](https://thepracticaldev.s3.amazonaws.com/i/d8sj8zitkgh1i9pil9zs.png)

__For accessibility reason ensure that elements positioned with an `absolute` or `fixed` value do not obscure other content when the page is zoomed to increase text size.__ Say what? This and more will be discussed in _Web Accessibility and Usability_.

You should note that when you use _absolute_ or _relative positioning_ a _stacking context_ is created when the value of the `z-index` is not `auto`. But _fixed positioning_ always creates a new _stacking context._ 

There are two questions that may arise from this last statement. They are:

* What is a stacking context?
* What is a `z-index` ?

Both questions will be answered in the next topic. [_The CSS z-index_](https://dev.to/ziizium/css-z-index-j86).