What is Absolute Positioning

Learn what is absolute positioning

position: absolute;

It is used to position an HTML element relative to the edges of its first-positioned ancestor or relative to the edges of the browser’s viewport

Note: while using the position property; we take the help of left, right, bottom, top and z-index properties to position an HTML element.

Example code:

HTML:

<div class="parent">
<div class="child">
</div></div>

CSS:

div{
border: 1px solid black;]
}
.parent{
width: 50%;
height: 50px;
align-content: center;
border-color: green;
}
.child{
width: 25px;
height: 25px;
right: 0px;
position: absolute;
}

Output:

1. In the above code, we have created parent <div> inside it we have creted child <div>
2. If you want push the child <div> out of the parent, you should set the CSS position property to the “absolute” value. Then you can move using any of these CSS property “left”, “right”, “top”, or “bottom” property.
3. Here, we using “right” to 0px, so the child <div> is plased right side and “position” to the “absolute”, so the child <div> is out from the parent.