The position property gives the elements in different types of positioning, position have five types of property:
1. Position
2. Top
3. Right
4. Bottom
5. Left
Above property have some values these are given below:
1. Position
a. Static
It is default value of position. Here is elements render in order, as they appear in the document flow.
b. Relative
The element is positioned relative to its normal position.
c. Absolute
The element is positioned relative to its first positioned (not static) forbear element.
d. Fixed
The element is positioned relative to the browser window.
2. Top
a. <length> here given the value in pixels (top: 10px)
b. <Percentage> here given the value in percentage (top: 10%)
3. Right
a. <length> here given the value in pixels (right : 10px)
b. <Percentage> here given the value in percentage (right: 10%)
4. Bottom
a. <length> here given the value in pixels (bottom : 10px)
b. <Percentage> here given the value in percentage (bottom: 10%)
5. Left
a. <length> here given the value in pixels (left: 10%)
b. <Percentage> here given the value in percentage (left: 10%)
Position Examples:
CSS Code:
<style type="text/css">
#SecondDiv
{
width:70px;
height:70px;
background-color: #CD853F;
left:30px;
top:50px;
position: <!--Enter your desired position-->
}
#FirstDiv
{
width:150px;
height:150px;
border: 2px solid #E5E5E5;
}
</style>
Positions:
position:static;
position:relative;
position:absolute;
position:fixed;
Body Code:
<body>
<div id="FirstDiv">
<div id="SecondDiv">
This is second div
</div>
</div>
</body>
Output:
Leave Comment