Position is Everything 
Tags: css, webdev, frontend, beginners
Published: 2020-06-02 04:57:05

---
title: Position is Everything 
published: true
description: A moment of tricky from CSS
tags: css, web-development, frontend, beginner
cover_image: https://img-a.udemycdn.com/course/750x422/85702_ca7a_9.jpg
---
# How positioning works?
Positioning help us to control our elements into a place.

Here are the different types of positioning.

```css
  position: static; /* default */
  position: relative;
  position: absolute;
  position: sticky;
  position: fixed;
  position: inherit;
```

## Position: Static
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gapi4c3cx3i6n77bqcvd.png)
A default position in every situation. It is always positioned according to the normal page.

> *Will it change if I position the element on top, right, bottom or left?*  
> **NO** , it will become stated if you can position the element.

## Position: Relative
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t0qlqhjkl81mn4u4pme6.png)
A positioned relative to its normal position. It allows to direct in every position we decided.
When we don't declare any value to a position, it'll act like it's *Static*
We can use the *top, right, bottom and left* position to push every element.

## Position: Absolute
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/90lyof7dh7si73ln1xyp.png)

A position that can remove the Element from the document flow and position itself in reference to a container and a container has to have a position assigned to it as well.
A *container* element has a **relative** position wonder why it is centered  in the browser.
The text overlaps the image, just because both have positioned in **Absolute**

## Position: Sticky
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l7du24xrbje8jo7kchi1.png)

<blockquote>
<i>Sticky positioning is a hybrid of relative and fixed positioning.  The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
</i>
-  Mozilla Foundation, MDN Web docs
</blockquote>

The nav-bar container(parent) with icon(child) and navigation(child) set to **sticky position**

As you scroll the browser, the sticky container will continue appear as it flows.

At the initial of code the padding of your element will not set to auto
you need to declare: 

```css
   nav-bar { 
      /* using vendor-prefixed (-webkit and -moz) for specific browser */
              position: -webkit-sticky;    /* for chrome browser */
              position: -moz-sticky;       /* for mozilla browser */
              position: sticky;
              top: 0;
              overflow: hidden;    /* to fix the height of the container */ 
   }
```
*Declared the* **overflow property.**


**Q:** *Why it doesn't work?*

**A:** *your browser is not supported.*

Kindly check [caniuse](https://caniuse.com/)

## Position: Fixed
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ef1rsq4ot066o11ewd7b.png)

Similar to **position absolute**, an element that has fixed position is taken out of the document flow. The major difference is: elements with position fixed is always positioned relative to the browser window.

I removed the paragraph element to a container and the result is container(parent) with an image(child) overlaps the paragraph.
___
# How about the other attributes?
**Inherit** a position with the same value from its parent.

```css
   parent-element { padding: 15px; }
   child-element { padding: inherit; }
```


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mvqqxlort5g6n418woqt.png)
The *top, right, bottom and left* It give us the permission to place every element with a set position **e.g. Relative, Absolute and Fixed**.


(-) Negative values for an attribute is accepted.

The *z-index* property manipulates the vertical stacking order of elements that overlap
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vrjaapzfvdnmxpigzv8g.png)


___

Application that I used: 
[Balsamiq](https://balsamiq.com/)
Header Image
[Udemy Master Class Header](https://www.udemy.com/course/css3-masterclass/)
Reference for Sticky Position
[Mozilla Foundation](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
Browser Tool for browser compatibility
[caniuse](https://caniuse.com/)