Positionieren von Text über eine Leinwand in einem responsiven div

Question

Diese Frage wurde in Teilen gestellt und beantwortet, aber ich kann nicht scheinen, eine Antwort in vollem Umfang zu finden. Ich habe ein Responsive-Div in Bootstrap, und ich (1) möchte, dass meine Leinwand mit der gleichen Position und den gleichen Abmessungen angezeigt wird, und (2) möchte, dass mein Text über der Zeichenfläche angezeigt wird.

<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%; 
} 

Jede Beratung? Ich weiß, dass ich eine Art Position css auf der Leinwand brauche, aber ich weiß nicht was, und absolute Positionierung wird mir Probleme mit der Reaktionsfähigkeit geben. Ich würde auch gerne von extra Javascript für die Positionierung bleiben, aber wenn jemand einen Weg erklären könnte, der es nicht buggy macht, würde ich für den Vorschlag offen sein.

Danke!

Answer 1

Sie legen

position: relative;

Auf dem Hintergrund div.

Platz

Position: absolute;

Auf den Vordergrund div und Position mit top, bottom, left, right. Der Vordergrundcontainer funktioniert relativ zum Hintergrund, dh er reagiert, wenn Sie die Breite des Vordergrunds mit%