Estoy tratando de incrustar el selector ::before del contenedor de imágenes detrás de la imagen, pero aparece en la parte superior de la imagen, quiero que el contenedor ::before venga de acuerdo con la posición que mencioné en la codificación
**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%; }La position: absolute alinea el elemento DOM en función del ancestro posicionado más cercano (posicionado = no con la propiedad de posición predeterminada).
Esta es la razón por la que el código funciona cuando establece la position: relative con la etiqueta img. Sin él, buscaría más arriba en el árbol DOM y, si no encuentra ningún elemento posicionado, alineará el objeto en relación con la ventana del navegador.
Aquí puede encontrar más información sobre el diseño posicionado: https://developer.mozilla.org/en-US/docs/Web/CSS/position