Hello reader's ,In todays blog we will discuss about the position property used in CSS.
Basically the position property specifies which type of positioning method used for an element such as static, relative, absolute or fixed.
The top, right, left and bottom properties specifies the position of the elements in a document.
Below is the syntax used for positioning the elements :-
/* Keyword values */
position :- static;
position :- relative;
position :- absolute;
position :- fixed;
position :-sticky;
/* Global Values */
position :- inherit;
position :- initial;
position :- unset;
Position : Static :-
- The elements in html are position static by default and uses a normal behavior.
- The elements that are positioned static do not get affected by the left, right, top or bottom properties.
Below is the code showing the position : static to the html element : -
<!DOCTYPE html>
<html>
<head>
<style>
.box-set {
background: #eaeaed;
}
.box {
background: #2db34a;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<div class="box-set">
<figure class="box box-1">Box 1</figure>
<figure class="box box-2">Box 2</figure>
<figure class="box box-3">Box 3</figure>
<figure class="box box-4">Box 4</figure>
</div>
</body>
</html>
In this example , all the boxes are placed over one another as they are block level elements and do not move in any of the specify directions.
Position : Relative :-
- The element with the position as relative are positioned relative to its normal position.
- It also accepts the box offset properties such as left, top , right and bottom .
- The box offset properties allows the element to easily shift from its default position in any direction which we want.
- The relatively positioned elements may overlap other elements without moving them from their default position.
Below is the code showing the relatively positioned elements :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #fff;
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.box-set,
.box {
border-radius: 6px;
}
.box-set {
background: #eaeaed;
}
.box {
background: #2db34a;
height: 80px;
line-height: 80px;
position: relative;
text-align: center;
width: 80px;
}
.box-1 {
top: 20px;
}
.box-2 {
left: 40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
</style>
</head>
<body>
<div class="box-set">
<figure class="box box-1">Box 1</figure>
<figure class="box box-2">Box 2</figure>
<figure class="box box-3">Box 3</figure>
<figure class="box box-4">Box 4</figure>
</div>
</body>
</html>
In this example , the boxes are placed over one another and when they were shifted from their default position , they got overlap over one another .
As we have set the top and bottom box offset property over a relatively positioned elements , so the priority will be given to the elements placed at the top.
Position : Absolute :-
- An element with absolute position is basically positioned relative to its nearest positioned parent div.
- If the absolute positioned element does not have any nearest positioned parent div then it uses the document body and hence, therefore moves along the page.
- It uses the box offset properties for placing the elements at their desired position.
- If we do not specify the box offset property , the element will be placed at the top left of its nearest relatively positioned parent.
Below is the code showing the absolute position elements :-
<!DOCTYPE html>
<html>
<head>
<style>
<html>
<head>
<style>
body {
color: #fff;
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.box-set,
.box {
border-radius: 6px;
}
.box-set {
background: #eaeaed;
height: 200px;
}
.box {
background: #2db34a;
height: 80px;
line-height: 80px;
position: fixed;
text-align: center;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}
</style>
</head>
<body>
<div class="box-set">
<figure class="box box-1">Box 1</figure>
<figure class="box box-2">Box 2</figure>
<figure class="box box-3">Box 3</figure>
<figure class="box box-4">Box 4</figure>
</div>
</body>
</html>
In this code , each box is absolutely positioned in relation to its parent div.
The elements that has a fixed height and width is absolutely positioned while the element's which doesn't have a specific height and width using the box-set property it displays the element with a height spanning the entire specified size.
Position : Fixed :-
- The element with the position as fixed is positioned relative to the view port.
- A fixed element does not leave any gap in the page where it would have been normally located.
Below is the code for the element with the fixed position :-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #fff;
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.box-set,
.box {
border-radius: 6px;
}
.box-set {
background: #eaeaed;
height: 200px;
}
.box {
background: #2db34a;
height: 80px;
line-height: 80px;
position: fixed;
text-align: center;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}
</style>
</head>
<body>
<div class="box-set">
<figure class="box box-1">Box 1</figure>
<figure class="box box-2">Box 2</figure>
<figure class="box box-3">Box 3</figure>
<figure class="box box-4">Box 4</figure>
</div>
</body>
</html>
In this code , the boxes are positioned in relation to the browser's view port.
Conclusion :-
Hence, with the help of various examples I have explained the position property used in CSS.
0 Comment(s)