Problème position absolute et relative - responsive

Lisacad
Les bases HTML/CSS
PHP Wordpress

Bonjour,
j'ai une image en background (position relative), et un bloc avec un background blanc (position absolute).
Je veux que mon bloc blanc se positionne au milieu de l'image et reste dans cette position peu importe la taille de l'écran. Ce qui n'est pas le cas, lorsque je change de taille d'image mon bloc texte se balade sur ma page.
J'ai essayé pas mal de chose mais rien n'y fait.

Voici mon code :

<div style="margin: 1em; background-image: url('mon-image'); background-size: contain; height: 1104px; widht: 1564px; background-repeat: no-repeat;">

<div style="object-fit: contain; display: block; position: absolute; background-color: white; top: 650%; margin-left: 2%; margin-right: 10%; padding: 2% 1% 2% 1%;">

</div>
</div>

3 réponses

popotte

Hello :)

Alors il y a un moyen plus simple pour y arriver avec la flexbox:

<div style="background: url('mon-image') cover no-repeat; height: 1104px; width: 1564px; display: flex; justify-content: center; align-items: center;">
    <div style="height: 500px; width: 500px; background-color: #ffffff;></div>
</div>

Et c'est tout good, après à toi de voir avec les tailles que tu veux :p

Lisacad
Auteur

Super merci,
Est ce que tu sais comment changer sa position sur l'image ? Pour l'instant mon bloc et tout en haut de mon image. J'ai utilisé "top" / "bottom" mais il ne bouge pas.

popotte

Alors il faut tout simplement retirer le position relative et absolute, et utiliser uniquement la flexbox pour le positionnement, et c'est le align items qui s'occupera de centrer