Comment mettre un élement sur deux élements en HTML/CSS

Fermé

bh_france Messages postés 8 Date d'inscription vendredi 1 février 2019 Statut Membre Dernière intervention 23 juillet 2023 - 23 juil. 2023 à 18:31
Pitet - 24 juil. 2023 à 10:06

Bonjour à toute la communauté CCM,

Je fais face à un blocage sur le surpositionnement d'un élément sur deux élements (fond gris et le bas de page).

J'ai tenté divers solutions mais en vain voici mon cas en image :

Je veux arriver à cette solution :

PS: Prenez juste en compte le fond.

Voici le code en HTML :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test Snark Factory</title>
        <link rel="stylesheet" href="test.css">
        <link href="https://fonts.googleapis.com/css2?family=Dosis%3Awght%40500%3B700&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <nav id="nav">
                <img src="Logo-horizontal.png" id="img_snark"/>
                <ul id="tabs">
                    <li>Qui Sommes-nous</li>
                    <li>Blog</li>
                    <li>FAQ</li>
                    <li>Contact</li>
                    <li id="compte">Mon compte</li>
                </ul>
                <img src="united-kingdom.png" id="uk_images">
            </nav>
        </header>
        <img src="Union.png" id="union_images">
        <div class="images_first-plan">
            <div id="sentences">
                <img src="entree.png" id="entree_images">
                <img src="cake.png" id="cake_images">
                <img src="par Nicolas Cooking.png" id="nicook_images">
            </div>
            <div class="images-play">
                <img src="image 3.png" id="video_images">
                <img src="PLAY 1.png" id="play">
            </div>
        </div>
        <div class="grey_font">
        </div>
        <div class="ads">
        </div>
        <footer>
        </footer>
    </body>
</html>

Le code en CSS :

.grey_font {
    background-color: #FAF6EE;
    height: 280px;
    z-index: 1;
}

.ads {
    background-color: #007181;
    height: 160px;
    z-index: 2;
    margin-left: 7%;
    margin-right: 7%;
    border-radius: 30px;
    position: relative;
    display: flex;
}

footer {
    background-color: #00525D;
    height: 369px;
    z-index: 1;
}

Quand je met le bas de page et le fond gris en position absolute ou fixed pour permettre la superposition du fond bleu verdâtre, mais ça les fait disparaître.

Votre aide est plus que jamais le bienvenue.

Je vous remercie.

A voir également:

Comment mettre un élement sur deux élements en HTML/CSS
Photoshop elements gratuit - Télécharger - Retouche d'image
Editeur html - Télécharger - HTML
Element introuvable il n'existe plus dans l'ordinateur - Guide
Deux whatsapp sur un téléphone - Guide
Deux ecran pc - Guide

1 réponse

Réponse 1 / 1

Pitet
24 juil. 2023 à 10:06

Bonjour,

Pas de position absolute nécessaire ici, une marge négative sur le footer semble suffisant :

.ads + footer {
  margin-top: -80px;
}

Discussions similaires

Un seul de mes écouteurs marche. Que faire ?

webcame eton et 838b

Comment inspecter l'élément sur mobile ?

2 comptes facebook avec même mail et même nom