Position:fixed sur une sidebar

**propsleps** · 24/01/2013, 17h48

Bonjour,

Je souhaite avoir une position fixe sur ma sidebar positionnée à gauche de façon à ce qu'elle reste visible lorsque l'utilisateur déroule le contenu à droite.
Le problème c'est que lorsque que je mets la propriété position:fixed, le contenu passe par dessus la sidebar...

Voici mon code :

Code html :

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
<aside>
	<div id="logo"></div>
		<nav>
			<ul>
				<li><a href="#">Electronic</a></li>
				<li><a href="#">Dubstep</a></li>
				<li><a href="#">Indie</a></li>
				<li><a href="#">Drum n Bass</a></li>
				<li><a href="#">House</a></li>
			</ul>
		</nav>	
</aside>
 
<div id="content">
		<article>
			<header>
				<h1>Music Title</h1>
			</header>
			<section>
                                <p>Du contenu...</p>
			</section>
			<footer>
				<!-- Sharing options here -->
			</footer>
		</article>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
aside{
	position:fixed;
	margin: 0 5% 0 3%;
}
#content{
	position:relative;
	overflow:hidden;
	margin:5% 5% 0 25%;
}

J'ai essayé de mettre des z-index mais ça ne fonctionne pas, et avec un un margin ça ne va pas non plus car le contenu de droite vient se mettre sur la sidebar de gauche, dès qu'on redimensionne le navigateur...

Voici une image du problème :

Quelqu'un a une idée ?

**Muchos** · 24/01/2013, 20h26

Ça fonctionne avec un z-index :

Code html :

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
48
49
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>menu fixed</title>
	<style type="text/css">
aside {
        position:fixed;
        margin: 0 5% 0 3%;
        z-index: 2;
}
#content {
        background: red;
        position:relative;
        overflow:hidden;
/*      margin:5% 5% 0 25%; */
}
        </style>
</head>
<body>
<aside>
	<div id="logo"></div>
		<nav>
			<ul>
				<li><a href="#">Electronic</a></li>
				<li><a href="#">Dubstep</a></li>
				<li><a href="#">Indie</a></li>
				<li><a href="#">Drum n Bass</a></li>
				<li><a href="#">House</a></li>
			</ul>
		</nav>	
</aside>
 
<div id="content">
		<article>
			<header>
				<h1>Music Title</h1>
			</header>
			<section>
                                <p>Du contenu...</p>
			</section>
			<footer>
				<!-- Sharing options here -->
			</footer>
		</article>
</div>
</body>
</html>

**propsleps** · 25/01/2013, 11h21

Malheureusement non...,
il y'a toujours le problème : le contenu de droite passe sur la sidebar dès que je redimensionne le navigateur comme le montre l'image.