Day 31 of #100DaysOfCode:Review CSS-Position
Tags: css, layout, frontend, webdev
Published: 2020-08-15 03:51:12

## Introduction
The *Review CSS* series is the note for some common CSS usages.
The CSS position includes static, relative, absolute, fixed, and sticky.
 
##1. static
* *static* is the *default* position style. The *static* components will be placed from left and top corner of the viewport.  

{% codepen https://codepen.io/JenHsuan/pen/rNeejeL %}  

###code
```html
<div class="mother-box">Mother
  <div class="box" id="one">One</div>
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>
  <div class="box" id="four">Four</div>
</div>
```
```css
.mother-box{
  width:500px;
  height: 200px;
  background:green;
  color:white;
  overflow:scroll;
  position: absolute;
}
.box{
  background:red;
  color:white;
  height: 20%;
}
#two{
  z-index: 1;
  top: 100px;
  left:20px;
  background:blue;
}
```

##2. relative
The *relative* components have the following properties:
1. The component will be moved relative to the original position(static) according to *top, left, right* 
2. Moved component will not affect other components. 
3. The original position(static) will still be available.

{% codepen https://codepen.io/JenHsuan/pen/RwaNvrB %}  

###code
Modify the box two
```
#two{
  position: relative;
  top: 20px;
  left:20px;
  background:blue;
}
```


##3. fixed
Scroll the window from the following CodePen example. The *fixed* components have the following properties:
1. The fixed component is fixed to the viewport even we scroll the window.
2. The width of the fixed component changes (no longer as long as the mother box)
3. The original position(static) will be unavailable.

{% codepen https://codepen.io/JenHsuan/pen/vYGGggr %}  

###code
```css
#two{
  position: fixed;
  z-index: 1;
  top: 100px;
  left:20px;
  background:blue;
}
```

##4. absolute
The *absolute* components depends on the position style of the parent component. There are two conditions.

###Condition 1: if the position style of the parent component is default (static)
It will perform as *fixed*
{% codepen https://codepen.io/JenHsuan/pen/OJNPdjY %}  

```css
#two{
  position: absolute;
  top: 20px;
  left:20px;
  background:blue;
}
```

###Condition 2: if the position style of the parent component is one of the following position style. 
* relative | absolute | fixed | inherit
* The absolute component will move with the parent component when scrolling the window
{% codepen https://codepen.io/JenHsuan/pen/MWyyJEe %}

```css
.mother-box{
  width:500px;
  height: 200px;
  background:green;
  color:white;
  overflow:scroll;
  position: relative;
}
#two{
  position: fixed;
  z-index: 1;
  top: 100px;
  left:20px;
  background:blue;
}
```

##5. sticky
The *sticky* component has the following properties:
* The *sticky* component performs as a *relative* component before it arrives the position we set *top, left, right* 
* The following example is copied from MDN (https://developer.mozilla.org/zh-CN/docs/Web/CSS/position)

{% codepen https://codepen.io/JenHsuan/pen/vYGEPbG %}

That's it!

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
* My latest side project - Daily Learning: https://daily-learning.herokuapp.com/