[Résolu] 2 div l'une au dessus de l'autre

Bonjour,
Je m'arrache les cheveux pour un positionnement tout bête.
Je cherche à positionner deux div l'une sous l'autre, avec un décalage de quelques pixels afin de créer un filet extérieur, un exemple en image:


Voilà où j'en suis:

<div class="wrapper">
        <div class="filet">
            <div class="bloc">
                <h2>Titre</h2>
                <p>Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum artium nondum per aetatem firmato consilio descripsisse, exulque mittendus, ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit funesti carnificis manu.</p>
            </div>
        </div>
    </div>

et le code css correspondant:

        body {
            box-sizing: border-box;
        }

        .wrapper {
            width: 80%;
            margin: 0 auto;
        }

        .bloc {
            color: #fff;
            width: 400px; /* idéalement en taille relative */
            background: #1d1d1d;
            padding: 1em;
        }

        .filet {
            position: absolute;
            left: 5px;
            top: 5px;
            z-index: 2;
            width: 400px;
            border: 1px solid #fff;
        }

Mais visiblement ça ne fonctionne pas... Quelqu'un avec un oeil neuf et des explications?

Merci par avance!

Hello voici une solution si tu veux garder absolument une div "filet" alors déplace la car elle englobe la div "bloc"

<div class="wrapper">
		<div class="bloc">
			<h2>Titre</h2>
			<p>Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum artium nondum per aetatem firmato consilio descripsisse, exulque mittendus, ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit funesti carnificis manu.</p>
			<div class="filet">
			</div>
		</div>
	</div>

 body {
    box-sizing: border-box;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
}

.bloc {
    color: #fff;
    width: 400px; /* idéalement en taille relative */
    background: #1d1d1d;
    padding: 1em;
    position:relative; /*Ajout d'un position relative au parent de ".filet"*/

}

.filet {
    position:absolute;
    left: 5px;
    top: 5px;
    width: 100%;
    border: 1px solid red;
    height:100%;
    z-index:-1; /* z-index pour placer en dessou de .bloc */
}

sinon utilise before after
Modifié par TahitiBOB67 (28 Mar 2018 - 18:34)

Hello,

Merci pour vos précisions, c'est parfait!
Je vais me pencher sur un montage avec :after