In CSS3 there are many methods to show elements on a page with
different positions.You can specify the position of an element
according to it's parent element and also you can position it
according to the browsers screens.
There are following types of position elements.
1) static
2) relative
3) absolute
4) fixed
Static positioning
Actually static is the default property of position.
It means that if you don't use any position property
on any element then static property is by default is
applied and also it does not effect on the position
of the element.
Relative positioning
Relative positioning is used to moves the box relative to its original
according to it's normal flow.And it's special behavior is, the empty space
occupied by it will not allow other element to adjust in that space.
<style type="text/css">
div{
position: relative;
left: 70px;
top: 30px;
background-color: orange;
}
</style>
<div>
Inner div with relative position
</div>
Output of above code
Inner div with relative position
Absolute positioning
Absolutely positioning is not according
to the elements flow and it effects according to the
browser screen.Unlike relatively positioned
elements, the space they would have occupied is closed up. In fact, they
have no influence at all on the layout of surrounding elements.
<style type="text/css">
div{
position: absolute;
left: 70px;
top: 30px;
background-color: orange;
}
</style>
<div>
Inner div with absolute position
</div>
Output of above code
Inner div with absolute position
Fixed positioning
Fixed positioning is totally different from static
and absolute position.It does not move with the flow of document.
While fixed element remains at one place when document scrolls.
It's example with source code is given below.
<style type="text/css">
div{
position: fixed;
left: 20vw;
bottom: 0px;
background-color: orange;
}
</style>
<div>
Inner div with fixed position position
</div>
Output of above code
Output of fixed position is fixed on the bottom of the browser screen's bottom.
Check it by scrolling up and down.
Inner div with fixed position position
Offset position properties
Offset values are used to keep some distance from the targeted edge.
For if we use offset-position form top, then it will show distance from
the top side in the browser's top side.Similarly if we use offset position
form other side it will put the distance as specified.
There are following offset properties.
1) offset-position: auto;
2) offset-position: top;
3) offset-position: bottom;
4) offset-position: left;
5) offset-position: right;
6) offset-position: center;
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
