Z-index et redimensionnement

Bonjour,
Sur le site suivant en développement (lvn.lomnibus.net), je souhaite placer une vidéo en fond de page fullframe et par dessus, une animation gif.

Mon problème est quand je redimensionne ma fenêtre :
- ma vidéo de fond s'adapte au redimensionnement de la fenêtre ;
- par contre, mon animation gif, en position:absolute sinon le z-index ne fonctionne pas, déborde en hauteur de son conteneur #bloc-accueil.

Qu'est-ce que je fais mal ? Merci d'avance.

HTML

<div id="bloc-accueil>
    <div id="video-fond-accueil">
        <figure class="video_container">
            <video...></video>
        </figure>
    </div>
    <div id="animation-accueil">
        <div class="ce_image">
            <figure ...></figure>
        </div>
</div>

CSS

#bloc-accueil {display : flex; justify-content: center;}
#animation-accueil {position: absolute ; z-index: 10; }

Modifié par jlba (06 Apr 2022 - 17:06)

Je ne maitrise pas flex mais juste un truc : id="animation-accueil" apparait 2 fois alors qu'un id doit être unique

kerlutinoec a écrit :
Je ne maitrise pas flex mais juste un truc : id="animation-accueil" apparait 2 fois alors qu'un id doit être unique

Bien vu. Merci.
Pour autant, ça ne fonctionne toujours pas.

Je résume mon besoin :

<div id="#bloc-accueil">
    <div id="fond-accueil"><video></div>
    <div id="animation-accueil"><img></div>
</div>

Mon problème est d'arriver à positionner #animation-accueil au dessus de #fond-accueil et se réduise en hauteur sans déborder de #bloc-accueil.

En mettant #animation-accueil en position:absolute, il se positionne au dessus mais en cas de redimensionnement, il déborde vers le bas.
En position:relative, je met top à -400px pour le faire remonter mais, en cas de redimensionnement, idem.

Quelle es la solution ?

Salut,

jlba a écrit :
En mettant #animation-accueil en position:absolute, il se positionne au dessus mais en cas de redimensionnement, il déborde vers le bas.

Si tu mets juste position: absolute; ca peut avoir des comportement étrange. Il faut leur donner au moins un top (ou bottom), un left (ou right) et un width et height.

Ansuite il va falloir gérer le positionnement de la video et de l'inmage a l'intérieur... pourquoi ne pas mettre directement la vidéo et l'image plutôt que des les englober dans les div ?