Estoy practicando HTML+CSS y tengo la siguiente duda:
¿Cómo superponer un texto a un svg haciendo uso de css pero sin depender de un position absolute hacia el top de la página?
O sea, es muy fácil hacer esto:
position: absolute;
top: 20%;
left: 4%;
z-index: 2;
Pero yo no quiero que dependa del top de la pantalla... Quiero que esté encima de el top usando algo como margin-top: -0.7em;
o sea lo que pretendo es que se superponga el texto y la imagen pero no dependiendo del top de la página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>LoQueSeaMi</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="FelipedelosH" />
<!-- Incluir Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Incluir Bootstrap JS y dependencias de Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style>
.tarjeta svg{
color: grey;
width: 40%;
height: 40%;
}
.kip_total{
color: red;
margin-top: -0.7em;
}
</style>
<body>
<div class="tarjeta">
<div class="container">
<div class="row">
<div class="col">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
</svg>
<p class="h1 kip_total">400</p>
<p class="h3 kip_description">Usuarios felices</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
Adjunto mockups de qué es lo que deseo: