In order to make more
complex layouts, we need to discuss the position property. It
has a bunch of possible values. The CSS position property is
used to set position
for an element. it is also used to place an element behind another
and also useful for scripted animation effect.
CSS Position & Helper Properties
So there are 5 main values
of the Position Property:
position: static | relative | absolute | fixed | sticky
and additional properties
for setting the coordinates of an element (I call them “helper properties”):
top | right | bottom | left AND the z-index
Important Note: Helper properties don’t
work without a declared position, or with position:
static.
1. Static
position:
static is the default value.
Whether we declare it or not, elements are positioned in a normal order on the
webpage. Let’s give an example:
First, we define our HTML structure:
<body>
<div class="box-orange"></div>
<div class="box-blue"></div>
</body>
Then, we create 2 boxes and define their widths, heights
& positions:
.box-orange { // without any position declaration
background: orange;
height: 100px;
width: 100px;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
position: static; // Declared as static
}
 |
| same result with & without position: static |
2. Relative
position:
relative: An element’s new position
relative to its normal position.
Starting with position: relative and
for all non-static position values,
we are able to change an element’s default position
by using the helper properties
that I've mentioned above.
Let’s move the orange box next to the blue one.
position:
relative: An element’s new position
relative to its normal position.
Starting with
position: relative and
for all non-static position values,
we are able to change an element’s default position
by using the helper properties
that I've mentioned above.
Let’s move the orange box next to the blue one.
.box-orange {
position: relative; // We are now ready to move the element
background: orange;
width: 100px;
height: 100px;
top: 100px; // 100px from top relative to its old position
left: 100px; // 100px from left
}
 |
Orange box is moved 100px to bottom & right, relative to its
normal position
|
NOTE: Using position: relative for an element, doesn’t affect other elements’ positions.
3.
Absolute
In
position: relative,
the element is positioned relative to itself. However,
an absolutely positioned
element is relative to its parent.
An element with
position: absolute is
removed from the normal document flow. It is positioned automatically to the
starting point (top-left corner) of
its parent element. If it doesn’t have any parent elements, then the initial document
<html> will be its parent.
Since
position: absolute removes
the element from the document flow, other elements are
affected and behave as the element is removed completely
from the webpage.
Let’s add a container as
parent element:
<body>
<div class="container">
<div class="box-orange"></div>
<div class="box-blue"></div>
</div>
</body>
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
}
 |
position: absolute takes
the element to the beginning of its parent
|
Now
it looks like the blue box has disappeared, but it hasn’t. The blue box behaves
like the orange box is removed, so it shifts up to the orange box’s place.
Let’s move the orange box 5 pixels:
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
left: 5px;
top: 5px;
}
 |
Now we can see the blue box
|
The coordinates of an absolute positioned element are relative to its parent if the parent also has a non-static position. Otherwise, helper properties position the element relative to the initial <html>.
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: absolute;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 5px relative to the most-right of parent
}
4. Fixed
Like position: absolute, fixed positioned elements are also removed from the normal document flow. The differences are:
- They are only relative to the <html> document, not any other parents.
- They are not affected by scrolling.
.container {
position: relative;
background: lightgray;
}
.box-orange {
position: fixed;
background: orange;
width: 100px;
height: 100px;
right: 5px; // 5px relative to the most-right of parent
}
Here in the example, I
change the orange box’s position to fixed, and this
time it is relative 5px to the right of the <html>,
not its parent (container):
As we can see,
scrolling the page doesn’t affect the fixed positioned
box. It is not relative to its parent (container) anymore.
5. Sticky
position: sticky can be explained as a mix of position: relative and position: fixed. It
behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:
IMPORTANT: Position Sticky is not
supported in Internet Explorer and earlier versions of other browsers.
Z-Index
The z-index property
determines the stack level of an HTML element. The “stack level” refers to the
element’s position on the Z-axis (as opposed to
the X-axis or Y-axis). A higher
value means the element will be closer to the top of the stacking order. This
stacking order runs perpendicular to the display, or viewport.
 |
3-DIMENSIONAL REPRESENTATION OF THE Z AXIS |
In order to clearly demonstrate how z-index works, the image above exaggerates the display of stacked
elements in relation to the viewport.