CSS Position
The CSS Position Property is used to position any Html element before or after any Html element you want. You can place Html element anywhere you want. You can set the position of Html element by using top, bottom, left, right properties. This property is used when you set the position property of the element first.
Basically, The CSS Position property has 4 basic Parts:-
- CSS Static Positioning
- CSS Fixed Positioning
- CSS Absolute Positioning
- CSS Relative Positioning
CSS STATIC POSITIONINGThis is by default the position of the Html element. They appear normally on your web pages. They didn’t affect any positioning on your webpage.
CSS Fixed Positioning
This property is used to fix the position of the Html element on your web pages. When you apply this property to the Html element they fixed their position. It doesn’t move even you scroll your window screen. Let see an example to clear this property.
Example:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position in CSS </title>
</head>
<style>
div{
border: 2px solid black;
height: 320px;
width: 420px;
margin: auto;
overflow: scroll;
}
h1{
color: red;
position: fixed;
left: 320px;
}
</style>
<body>
<div>
<h1> Tokyo Olympics 2020</h1>
<p>Lorem ipsum, dolor s elit. Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, doicing elit. Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, dolor sit asicing elit. Cobo eveniet repellat?</p>
<p>Lorem ipsum, dog elit. Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, dolor sit amet g elit. Corpori eveniet repellat?</p>
<p>Lorem ipsum, dolor sit ameorporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, dolor sit amet Corporis explicabo eveniet repellat?</p>
</div>
</body>
</html>
Output :-
CSS Relative Property
The relative positioning property is used to set the element relative to its normal position.
Example:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position in CSS </title>
</head>
<style>
h1{
color: red;
position: relative;
}
</style>
<body>
<div>
<h1> Tokyo Olympics 2020</h1>
<p>Lorem ipsupisicing elit. Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum,adipisicing elit. Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, adipisicing elit. Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, dolor elit. Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, dolor sit . Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, dolor Corporis explicabo eveniet repellat?</p>
<p>Lorem ipsum, dolor Corporis explicabo eveniet repellat?</p>
</div>
</body>
</html>
Output:-
CSS Absolute Positioning
In this property, the position is relative to its first position. In other words, It is positioned relative to its closest positioned ancestor. Let’s see through an example below:-
Example:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position in CSS </title>
</head>
<style>
body{
background-color: lightblue;
}
h2{
position: absolute;
background-color: lightcoral;
color: blue;
top: 200px;
left: 100px;
}
h3{
color: yellow;
background-color: cornflowerblue;
}
h1{
color: red;
background-color: cornsilk;
position: absolute;
top: 250px;
left: 300px;
}
</style>
<body>
<p> It started from top left cornor. </p>
<h3> This is a heading without positioning.</h3>
<h1> This is a Heading 1. </h1>
<h2> This is a Heading 2. </h2>
</body>
</html>
Output :-
0 comments:
Post a Comment