Div imbriquées et superposition

[ripout]

Bonjour à tous.

J'essaie en vain de combiner des div comme ceci

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="content">
        <div class="element" >
 
 
 
        </div>
</div>
 
<div class="content">
        <div class="element" >
 
 
 
  </div>
</div>

Je souhaite que la hauteur div de classe element puisse dépasser par dessus le div de classe content suivant.

J'ai écrit le css suivant avec les couleur affreuses qui servent de repère visuel...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.content {
	background-color: #F00;
	height: 300px;
	width: 300px;
	border: 10px dashed #FF0;
	z-index: 1;
	position: relative;
}
.element {
	width: 100px;
	background-color: #0F0;
	border: 1px solid #000;
	height: 500px;
	z-index: 999;
	display: block;
	position: relative;
}

J'ai essayé de fouiller toute les propriété css qui me semblait pouvoir être utiles.
Et là j'aurais vraiment besoin qu'on m'explique si ce que je veut faire est possible

Merci d'avoir pris le temps de me lire

[Ceddoc]

En mettant un z-index de 0 au deuxième conteneur content?

[Candygirl]

Hello,

En principe, un simple position relative sur .element devrait suffire:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
.content {
	background-color: #F00;
	height: 300px;
	width: 300px;
	border: 10px dashed #FF0;
}
.element {
	width: 100px;
	background-color: #0F0;
	border: 1px solid #000;
	height: 500px;
	position: relative;
}