Learn CSS position
Every element in an HTML document occupies a position within the document`s flow. The CSS position properties allow you to position an element in the document flow. This chapter discusses the various properties that CSS controls to position an elements in the HTML document.
Normal Flow
In an HTML document, most elements are defined in two categories, They are block level elements and inline elements. Block level elements arrange elements within a page flow Vertically (from top to bottom) and in-line element simply flow horizontally (from left to right) within their container box. The official term for this normal position is called Normal Flow .
CSS positioning is often misunderstood. In order to make more complex layouts, it is important to get a better understanding of CSS position. In CSS there are four different types of position methods. They are static, relative, absolute and fixed position.
CSS Static Position
Static is the default position value of an element in a document. That is, if you place an element in a document without mentioning any CSS position property, the elemnt`s position is static.
<html>
<head>
<style>
div.one {
border:5px solid #4FFFA1;
}
div.two {
border:5px solid #CCCCCC;
}
</style>
</head>
<body>
<div class="one">Static Position Example - 1</div>
<div class="two">Static Position Example - 2 </div>
</body>
</html>output
In the above picture you can see each div placed vertically and it takes the width from left to right, because the div is positioned as static . As you can see in the above code , there is nothing mention about the position of Div. So it takes the default position (static).
CSS Relative Position
In relative position method , you can position the element relative to its normal position . In this case you should use left or right and top or bottom to move the element relative to its container.
<!Doctype>
<html>
<head>
<style>
div.first {
border:5px solid #4FFFA1;
width:200px;
}
div.second {
position: relative;
left: 100px;
width:200px;
border:5px solid #CCCCCC;
}
div.third {
position: relative;
left: 100px;
width:200px;
border:5px solid #ee3e64;
}
</style>
</head>
<body>
<div class="first">First Div</div>
<div class="second">Second Div
<div class="third">Third Div</div>
</div>
</body>
</html>output
In the above code you can see three Divs. First div is positioned normally and it place the left end. The second Div positioned as Relative . So we set its left side as 100px. The the second div positioned 100 pixels from the left side. Again the third Div is positioned as relative. Set its left as 100px and plced inside the second div. Now you can see the third Div is positioned 100px from its outer container (second Div).
Here we can see the second and third Div we positioned relative and 100px from left. But we can see each one is relatively positioned 100px from its outer container. Also you can see positioning an element relatively can cause overlap , but the reserved space for the element is still preserved in the normal flow.
CSS Absolute Position
When we position an element as Absolute , that element is is completely removed from the document’s normal flow. In Absolute position, the position is set through some combination of left, right, top and bottom properties.
<html>
<head>
<style>
div.first {
border:5px solid #4FFFA1;
width:200px;
}
div.second {
width:200px;
border:5px solid #CCCCCC;
}
div.third {
position: absolute;
top: 10px;
right:10px;
width:200px;
border:5px solid #ee3e64;
}
</style>
</head>
<body>
<div class="first">First Div</div>
<div class="second">Second Div
<div class="third">Third Div</div>
</div>
</body>
</html>output
In the above code we placed three Divs. The first two Divs positioned static and thrid Div positioned as Absolute . You can see, even we placed the third Div inside the Second Div, it positioned on the top right corner of the browser window. Because we set the third Divs position as Absolute.
CSS Fixed Position
When we position an element as Fixed , it always relative to its browser window only. Additionally, it will not scroll with the document.
<!Doctype>
<html>
<head>
<style>
div.first {
border:5px solid #4FFFA1;
width:200px;
}
div.second {
width:200px;
border:5px solid #CCCCCC;
}
div.third {
position: fixed;
top: 0px;
right:0px;
width:200px;
border:5px solid #ee3e64;
}
</style>
</head>
<body>
<div class="first">
One<br>
Two<br>
Three<br>
Four<br>
Five<br>
</div>
<div class="second">
Six<br>
Seven<br>
Eight<br>
Nine<br>
Ten<br>
</div>
<div class="third">Fix Here</div>
</body>
</html>output
In the above code we place three Divs on document and first and second Divs filled with data and positioned statically. The third Div positioned as Fixed . When we run this html code we can see the third Div positioned at the top right corner of the browser window and its not scrolled while the document is scrolling.
CSS Position Center (Horizontal Align center)
If you want to position text or images at the center of the page , you should set.
margin: 0 auto;When set the left and right margins to auto, it should split the available margin equally. Then the element will position at the center of the screen.
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.positionCenter
{
width: 100px;
height:100px;
margin: 0 auto;
border:10px solid #ee3e64;
}
</style>
</head>
<body>
<div class="positionCenter">
</div>
</body>
</html>How To Center an Object Exactly In The Center
If you want to position an element exactly at the center of the page, that means horizontally and vertically at the center of the screen, write the following code.
Source Code
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.absoluteCenter {
width:100px;
height:100px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border:10px solid #ee3e64;
}
</style>
</head>
<body>
<div class="absoluteCenter">
</div>
</body>
</html>