Positionnement du texte sur une toile dans un div responsive

Question

Cette question a été posée et répondue par portions, mais je n'arrive pas à trouver une réponse complète. J'ai un div réactif dans le bootstrap, et je (1) veux que ma toile affiche avec la même position et les mêmes dimensions, et (2) que mon texte apparaisse au-dessus de la toile.

<div class="col-md-9 content-wrapper> 
    <canvas id="canvas" resize="true"></canvas> 
    <p class="statement">Display this text over canvas</p> 
</div> 

css:

.statement{ 
    position:relative; 
    top:50%; 
    transform: translateY(-50%); 
} 

#canvas{ 
    width:100%; height:100%; 
} 

Un conseil? Je sais que je vais avoir besoin d'une sorte de position css sur la toile, mais je ne sais pas quoi, et le positionnement absolu me posera des problèmes avec sa réactivité. Je voudrais également rester loin de javascript supplémentaire pour le positionnement, mais si quelqu'un pourrait expliquer une façon qui ne le rendra pas bogué, je serais ouvert à la suggestion.

Merci!

Answer 1

Vous placez

position: relative;

Sur le div de fond.

Lieu

Position: absolute;

Sur la div premier plan et la position avec top, bottom, left, right. Le conteneur au premier plan fonctionnera par rapport à l'arrière-plan, ce qui signifie qu'il est réactif, si vous définissez la largeur du premier plan en utilisant%