Que recomiendan para posicionar elementos así, que sobresalen de su contenedor?

Hay muchas maneras, mi favorita consiste más o menos en lo siguiente:

1. Al contenedor padre de esa imagen asignarle la propiedad position con valor relative (position: relative) y opcionalmente la propiedad z-index con un valor, por ejemplo, de 1 (z-index: 1)

2. Al elemento hijo (en el que tienes la imagen que deseas que sobresalga, idealmente una de tipo .png o un .svg) asignarle la propiedad position, esta vez con un valor absolute (position: absolute), y un z-index superior al del padre (por ejemplo, z-index: 2)

3. Con esto podrás posicionar al elemento hijo donde quieras y estará sobre el contenedor del padre, solo necesitas asignarle valores a las propiedades top, right, bottom y/o left. Si por ejemplo quieres que la imagen esté flotando en la esquina superior izquierda, simplemente tienes que asignarle las propiedades top:0 y left:0. Para que sobresalgan del contenedor padre, puedes asignarle un valor negativo, por ejemplo, top: -50px, así la imagen podrá "sobresalir" del contenedor padre sin afectar el mismo.

Para que te quede más claro, te invito a revisar esta guía al respecto, y por supuesto, a practicar mucho :), espero te sea de ayuda.

z-index. Si le pones un 2 a la imagen y un 1 al rectángulo, el que tenga el mayor número se posicionará al frente del otro.

Muchas gracias por sus respuestas y guías amigos :D

Importante, que el padre no tenga un overflow con valor hidden. Puedes con el position y también con el trasform. Una transformación con translate en Y o con position con valor negativo en Y.

Ten en cuenta que es un hijo dentro de la tarjeta, es posible con una imagen que su tamaño real sea más grande que su contenedor. En ese caso puedes transformarlo con la escala. Escalas la imagen y luego le pones la posición relativa en Y negativa. Con esta técnica te puedes asegurar de que en cualquier caso va a conservar el espacio de respeto dentro de la tarjeta y no tener sorpresas en las diferentes pantallas cuando estés aplicando responsive.

Hola, hola !!! Muy buena pregunta 🎉Hice algo muy parecido en mi página de quizzes usando positions 🙌🏼(aunque también puedes usar CSS Grid).

Te dejo la página https://teffcode-community.github.io/quizzes/ y el código por si quieres revisarlo https://github.com/teffcode-community/quizzes/blob/main/styles.css#L118

Espero te sea de utilidad ✨

Muchas gracias por la respuesta Camilo!

Yo utilizo la propiedad position. Al elemento contenedor se le asigna relative, para que el hijo se posicione respecto a este y no a la pagina completa. Por su parte el hijo (el casco) se le asigna absolute. De esa forma puedes usar en el elemento hijo las propiedades top, right, bottom y left para posicionarlo. En este caso puede ser un left: 2rem y un top: -2rem.