Placement de DIV en "relative"

Invité · 13/06/2011, 15h57

Bonjour à tous.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<style>
		html, body, div {
			margin: 0;
			padding: 0;
		}
		#main {
			margin: 20px auto;
			width: 600px;
			height: 400px;
			background: yellow;
		}
		#main div {
			position: relative;
			width: 200px;
			height: 150px;
		}
		#block1 {
			top: 5px;
			left: 30px;
			background: blue;
		}
		#block2 {
			top: 10px;
			left: 35px;
			background: red;
		}
	</style>
</head> 
 
<body>
	<div id="main">
		<div id="block1">
			bloc 1
		</div>
		<div id="block2">
			bloc 2
		</div>
	</div>
</body>
</html>

Voici ce que je souhaite :
Pouvoir placer librement le div#block2 par rapport au bord supérieur gauche de div#main, si possible sans ajouter de conteneur à l'intérieur de div#main.

Mon code actuel ne permet pas au div#block2 de "s'affranchir" de la position du div#block1.

Est-ce possible ?

Merci.