I am trying to embbed the ::before selector of the image container behind the image but it is coming on the top on the image ,I want that ::before container comes according to the postion I Have mentioned in the coding
**html**
<div class='main'>
<img src="imgg.png">
</div>
**css**
.main{
height:150px;
width:150px;
margin:0 auto;
position:relative;
margin-top:1rem;
}
img{
width:100%;
height:100%;
background-size:cover;
background-repeat:no-repeat;
border-radius:50%;
}
.main::before{
display:block;
content:"";
width:100%;
height:100%;
position:absoulte;
top:-1rem;
right:-1rem;
background-color:red;
border-radius:50%;
}
The position: absolute property aligns the DOM element based on the closest positioned ancestor (positioned = not with the default position property).
This is why the code works when you set position: relative to the img tag. Without it, it would look further up the DOM tree, and if it doesn't find any positioned element, it will align the object relative to the browser window.
Here you can find some more informations about positioned layout: https://developer.mozilla.org/en-US/docs/Web/CSS/position