Table of contents
Hello Folks, In this article we will see how to position an element in a document.
The position property in CSS sets how an element is positioned in the document.The top, right, bottom, and left properties determine the final location of positioned elements.
Static -
Element will be positioned according to the normal flow of a document.
{
position: static;
}
Relative-
Element will be positioned according to the normal flow of a document, and then offset relative to itself based on the values of top, right, bottom, and left.
{
position: relative;
}
Absolute-
Element will be removed from the normal flow of a document,and there will be no space created for element in the page layout.They are not positioned based on their usual place in the document flow, but based on the position of their ancestor.
{
position: absolute;
}
Fixed-
Element will be removed from the normal flow of a document, and there will be no space created for element in the page layout. The fixed positioning property helps to put the element fixed on the browser. This fixed element is positioned relative to the browser window, and doesn't move even you scroll the window.
{
position: fixed;
}
TOP,RIGHT,BOTTOM &LEFT
Set the various offset properties
img {
position: relative;
top: 10px;
bottom: 20px;
left: 10px;
right: 10px;
}