It is mainly use to set the position of element on web page according to requirement. There are four method of Position Property. Static is a default position. Relative is set the position of element in any direction a/c to requirement. Fixed is set the position of element in any direction but it is fixed. Absolute is a work a/c to nearest ancestor.
Syntax
selector{
position: value;
}It has four values
- Static
- Relative
- Fixed
- Absolute
Static
It is default position. In this case we cannot set position of element from its normal position is knows as Static.
<html>
<head>
<style>
.green{
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color:green;
}
.blue{
position: static;
font-size: 1.5rem;
padding: 10px;
height: 200px;
width: 200px;
background-color:blue;
}
</style>
</head>
<body>
<h1>Static</h1>
<div class="green">
It is default position
</div>
<div class="blue">
It is default position
</div>
</body>
</html>
Relative
In this case we can set the position of element in any direction a/c to requirement is knows as Relative.
<html>
<head>
<style>
.what{
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color:green;
}
.tool {
position: relative;
left: 100px;
top: 90px;
font-size: 1.5rem;
padding: 10px;
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<h1>Relative</h1>
<div class="what">set the position of element</div>
<div class="tool">set the position of element</div>
</body>
</html>
Fixed
In this case we can set the position of element in any direction but it is fixed is knows as Fixed.
<html lang="en">
<head>
<style>
.why {
position: relative;
height: 2000px;
width: 200px;
color: black;
font-size: 1.5rem;
font-family: sans-serif;
padding: 10px;
background-color:green;
}
.them {
position: fixed;
top: 200px;
left: 10px;
padding: 10px;
font-size: 1rem;
color: black;
height: 100px;
width: 100px;
background-color:red;
}
</style>
</head>
<body>
<h1>fixed</h1>
<div class="why">
we can say that fixed element can not be scrolled
<div class="them">
we can say that fixed element can not be scrolled
</div>
</div>
</body>
</html>
Absolute
It work a/c to nearest ancestor. In this case we can set position of element in any direction is knows as Absolute.
<html>
<head>
<style>
.why{
position: relative;
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color:brown;
}
.show {
position: absolute;
bottom: 10px;
left: 70px;
font-size: 1.5rem;
padding: 10px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<h1>absolute</h1>
<div class="why">
It work a/c to nearest ancestor
<div class="show">It work a/c to nearest ancestor </div>
</div>
</body>
</html>
Border
The CSS border is a shorthand property.
CSS border properties
- border-style
- border-color
- border-width
Border style
border style properties are following :-
- Dotted
- It is describes a dotted border.
- dashed
- It is describes a dashed border.
- solid
- It is describes a solid border.
- double
- It is describes a double border.
- groove
- It is describes a 3D groove border.
- ridge
- It is describes a 3D ridge border
- inset
- It is describes a 3D inset border.
- outset
- It is describes a 3D outset border.
- none
- It is describes a no border.
- hidden
- It is describes a hidden border.
Example
<html>
<head>
<style>
h1.none {border-style: none;}
h1.dotted {border-style: dotted;}
h1.dashed {border-style: dashed;}
h1.solid {border-style: solid;}
h1.double {border-style: double;}
h1.groove {border-style: groove;}
h1.ridge {border-style: ridge;}
h1.inset {border-style: inset;}
h1.outset {border-style: outset;}
h1.hidden {border-style: hidden;}
</style>
</head>
<body>
<h1 class="none">none</h1>
<h1 class="dotted">dotted border.</h1>
<h1 class="dashed">dashed border.</h1>
<h1 class="solid">solid border.</h1>
<h1 class="double">double border.</h1>
<h1 class="groove">groove border.</h1>
<h1 class="ridge">ridge border.</h1>
<h1 class="inset">inset border.</h1>
<h1 class="outset">outset border.</h1>
<h1 class="hidden">hidden border.</h1>
</body>
</html> 
Border-color
This property is use to set the color of the border.
Three methods to set the color of the border.
- Name.
- RGB.
- Hex.
Example
<html>
<head>
<style>
h1.what {
border-style: solid;
border-color: green;
}
h1.them {
border-style: solid;
border-color:(128,0,0);
}
h1.why {
border-style: solid;
border-color: #B22222;
}
</style>
</head>
<body>
<h1 class="what">NAME of color</h1>
<h1 class="them">RGB of color</h1>
<h1 class= "why">HEX of color</h1>
</body>
</html> 
Border-width
Border width sets the width of the border
Example
<html>
<head>
<style>
h1{
border-style: solid;
border-width: 8px;
}
</style>
</head>
<body>
<h1>
Border width
</h1>
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about CSS please check Wikipedia Click here.
Stay Connected Stay Safe. Thank you.
0 Comments