CSS Positions

CSS Position means where an HTML element should be

placed. Positions are used to specify the location of an HTML
element on a page layout. By default, all elements in html are
positioned staticly, means according to page flow. But using css
positions, they can be moved from their position relatively or
absolutely.

Type of CSS positions

 Static Position ( Default Position)
 Relative Position
 Absolute Position
 Fixed Position

Static Position
Static position is the default position of all HTML elements. Static
means position according to the HTML Order or position taken by an
element by its own.
Note: CSS Properties top, left, bottom, right and z-index doesn't work with static position.

Element with static position.

Div with static position

<style>
.box{
width:200px;
height:200px;
background:#333;
 position:static;
}
</style>

<div class="box">
<p> Div with Static Position</p>
</div>

Position Relative
Relative Position means position of an HTML element with
respect to its actual position. Relative position can overlap over
another elements, relative to its position. Relative elements
moves, but their space remains. By default, relative elements are
above static elements on z axis. But of two or more elements are
relative and we move them, the last relative element will come on
the top(z axis)
Note: We can use top, left, bottom, right and z-index after giving position relative to an HTML
element.

Position Relative Example

<style>

.box1{

width:200px;

height:200px;
 background:#333;

.box2{

width:200px;

height:200px;

background:#999;

position:relative;

left:100px;

bottom:50px

</style>

<div class="box1">Div with position

static.</div>

<div class="box2">Div with relative position,

left 200px and bottom 50px</div>

Div with static position

Div with relative position and left 200px;

Position Absolute
Absolute Position means position of an HTML element in a
specific location outside of normal document flow. Position
Absolute remove the element from normal flow and shows all of
its own. An element with position absolute can be placed
anywhere on the page using properties top, left, right and bottom.
Absolute Element can also overlap other elements by using z-
index property.

Properties of Position Absolute

1. Leave space in normal flow.

2. Occupy width of content.
3. Can move relative to its non static parent.
4. width 100% of absolute element is actually 100% of its non
static parent element.
5. If all parent elements are static, absolute element moves
relative to body.
Note: We can use top, left, bottom, right and z-index after giving position absolute to an HTML
element.

Position Absolute Example

<style>

.box1{

width:200px;

height:200px;

background:#333;
 }

.box2{

width:200px;

height:50px;

background:#999;

position:absolute;

</style>

<div class="box1">Div with position

static.</div>

<div class="box2">Div with relative

absolute;</div>

Position Absolute on Browser

Div with static position

Div with Absolute position, See its no longer occupying space on normal flow. They are out of flow.
Position Fixed
Fixed Position means position of an HTML element with respect
to device window. It doesn't move even if we scroll window up or
down.
For Exp: the Top Menu of this web-page is positioned fixed to the top. It
doesn't move even after scrolling down or up.
Note: We can use top, left, bottom, right and z-index after giving position fixed to an HTML
element.
Click on the box below to make it fixed

Div with position fixed, left 200px; and top 300px from window;

position: sticky;
An element with position: sticky; is positioned based on the user's scroll
position.

A sticky element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky
positioning. Safari requires a -webkit- prefix (see example below). You must
also specify at least one of top, right, bottom or left for sticky positioning to
work.

In this example, the sticky element sticks to the top of the page (top: 0), when
you reach its scroll position.

Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
 background-color: green;
border: 2px solid #4CAF50;
}

CSS Z-Index
CSS Z-Index is used to place an non static element above
another element. Value of z-index is a number.
Note: z-index can work only if the position of the element is relative, absolute, or fixed. It Doesn't
work on position static.
div using position relative and z-index.

<style>

.box1{

width:200px;

height:200px;

background:#333;

position:relative;

z-index:1;

.box2{

width:200px;

height:200px;
 background:#999;

position:relative;

z-index:2;

.box3{

width:200px;

height:200px;

background:#ccc;

position:relative;

z-index:3;

</style>

<div class="box1">Div with position relative

and z-index 1.</div>

<div class="box2">Div with position relative

and z-index 2;</div>

<div class="box2">Div with position relative

and z-index 3;</div>
z-index example
Div with z-index 1

Div 1
Div with z-index 2

Div 2
Div with z-index 3

Div 3

As z-index of last div ( div-3) is greater than other two, it is on the

top.