CSS positions: static, fixed, relative, and absolute

static position, it’s usually the default position for elements, wthich means position is specified for all the html elements by default and all elements will appear normally where it supoosed to be. To override a div that was previously set to other positions, just do this.

#div1{
	position:static;
}

relative position, it means when you specify top, bottom, left or right, it will place the element relative to where it would normally occur in the document. For example, if the normal position of the element is in the center horizontally and you specify left is 30px, it will move the element 30px away from the center horizontally.

#div2{
	position:relative;
	left:30px;
}

fixed position, it will position the element relative to the browser window. For example, with fixed position and you specified top:30 px, it will put the element 30px down from the top of the browser window no matter if there are other elements, and it will stay in the same position even if you resize the browser window. Elements with fixed position can overlap with other elements.

#div3{
	position:fixed;
	top:30px;
}

absolute position, it will position the element relative to the first parent element that has a position other than static. The position will be exactly as you specified even if there are already other elements in the position you wanted it to be. Elements with absolute position can also overlap with other elements.

#div4{
	positive:absolute;
	top:30px;
	left:30px;
}

Search within Codexpedia

Custom Search

Search the entire web

Custom Search