Ребенок IMAGE за родительским DIV. Как?

Question

У меня есть изображение внутри div. Мне нужно, чтобы дочерний образ находился за родителем div.

<div class="parent"> 
    <img src="https://gsa-cmp-fileupload.s3.amazonaws.com/USA_Government_Branches_Infographic.png" class="child" /> 
</div> 

Это изображение должно быть за этим красной границы. Как это сделать?

.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    border-radius: 50%; 
 
    } 
 

 
.parent img.child { 
 
    width: 200px; 
 
    height: 200px; 
 
    }

<div class="parent"> 
 
    <img src="https://gsa-cmp-fileupload.s3.amazonaws.com/USA_Government_Branches_Infographic.png" class="child" /> 
 
    </div>

Я искал его в течение длительного времени, но до сих пор не могу понять, как это сделать. Пожалуйста, помогите.

Answer 1

Мы делаем это следующим образом:

.parent { 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    border-radius: 50%; 
    overflow:hidden; 
    }