CSS Position: Relative To Parent
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Pragati
In this tutorial we will show you the solution of CSS position relative to parent, it is a very interesting part to use relative position according to parents with help of CSS.
Many different methods help to use relative position in CSS concerning parents.
Here, below is given an example that helps you to understand this concept in a better way.
Step By Step Guide On CSS Position Relative To Parent :-
Now, below we are going to show some codes in which we are going to use CSS codes.
So, let us see how we use CSS codes in the below example that helps to implement position relative to the parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta HTTP-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title> CSS position relative to parent </title>
<style>
.parent_div {
width: 400px;
height: 400px;
background-color: light grey;
position: relative;
}
.child_div {
width: 150px;
height: 150px;
background-color: black;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>
<body>
<h1>
Talkers Code
</h1>
<h2>
CSS position relative to the parent
</h2>
<div class="parent_div">
<div class="child_div">
This is child div created under parent div
</div>
</div>
</body>
</html>- As, here we see that in the above example, we show you how HTML and CSS codes are used.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- Now, as we see in the above codes we create two divisions. One division under another division. So, our outer division becomes parent division concerning the inner division which acts as child division.
- Now, as we know that we want to apply relative position CSS to parent division concerning child division. For this, we apply position relative property to parent division and absolute position to child division.
- At last, we use top and right to set the margin of child div according to parent div. You can see the code on the browser to visualize the results in a better way.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we can understand CSS’s position relative to parents.
I hope this tutorial on CSS position relative to parent helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
