CSS Tutorial
CSS Positions
The CSS positioning is the placement of elements in their order of x and y axis and overlapping (z-index
).
The CSS position
property can also be used to control the boundary of a child (inner) elements.
This property is provided with some values in order to specify the kind and direction to position an element
- static
- absolute
- relative
- fixed
- sticky
What to Consider?
You must consider the types of position before using these values, as they may not affect the elements if the position
property is set to static
.
"Static" defines the default value of the position
property, it makes the elements static and places them in order of how they are being written in your HTML code.
Static Position
As explained above static
position is set by default. They are not affected by the properties (top
, left
, bottom
, right
). As the word implies, the position cannot be controlled from its default ordering.
However, static
can be used to restore to the default position if the position has already been set to another.
Example 1
div.scrollpan {
position: absolute;
top: 50px;
bottom: 50px;
}
The above example sets the position of <div>
elements with class="scrollpan"
to 50px
away from the top and 50px
away from the bottom of the containing element.
The second example below will restore the position to default (setting it to normal position without moving away from the containing element) with the static
value of the position
property.
Example 2
div.scrollpan {
position: static;
}
Relative Position
A relative
positioned element is an element positioned relative to its default position.
These elements can also overlap other elements and it is possible to set the direction using the top
, left
, bottom
and right
properties.
Example
.left_scrollpan {
position: relative;
top: 0;
left: 20px;
}
.right_scrollpan {
position: relative;
top: 0;
right: -50px;
}
Live Example
Absolute Position
An absolute
positioned element is positioned relative to the containing (parent) element that is having a position value different from static
.
If no containing element that has a position value other the static
is found, the element will be positioned relative to the <body>
element. This element can also overlap other elements and it is posible to set the direction using the top
, left
, bottom
and right
properties.
The following example defines an element with class="abs_class"
that is positioned absolute
inside a relative class="container"
parent.
Example
.container {
position: relative;
}
.container .abs_class {
position: absolute;
top: 50px;
left: -60px;
}
Live Example
Fixed Position
Setting an element to fixed
position will position the element relative to the browser window, and will not move even if the window is scrolled.
Example
.fix_pan {
position: fixed;
top: 30px;
right: 5px;
}
Live Example
<!DOCTYPE>
declaration is not set at the top of your document.Sticky Position
As the word implies, a sticky
elements is hangs to the viewport of a webpage whenever a certain scroll position is met. An element with a sticky
position adopts both position relative
and position fixed
, when a user scrolls to a certain position, the element gets fixed
and when the user moves out of the position, it becomes relative
.
Example
.sticky_pan {
position: sticky;
top: 30px;
right: 5px;
}
Live Example
sticky
is not supported in Internet Explorer, Edge 15 and earlier versions. Safari 6.1 until 7 requires a -webkit-
prefix to support it.Making Elements Overlap
When elements position is set but not static
, they overlap according to the order of how they follow in your coding.
To control the way elements overlap, you can use the z-index
. It is set according to the index
value you provide.
The index ranges from "-1 to 100" (lower to upper). This means that the lowest index is -1 and the highest index is 100.
button {
position: absolute;
left:50%;
top: 50%;
z-index: -1; }
div {
position: absolute;
left:50%;
top: 50%;
z-index: 1;
}
img {
position: absolute;
left:50%;
top: 50%;
z-index: 2;
}
What You Should Know at the End of This Lesson
- You should be able to tell briefly what CSS Positioning is all about.
- You should be able to identify the four (4) kinds of value for the
position
property. - You should be able to restore an element back to the default position (
static
). - If you enjoyed this lesson, please share.