[RÉSOLU] Div en-dessous d'une autre - position absolute/relative

Bonjour à tous !

Voilà, j'ai un petit souci concernant le positionnement d'une div (d'un menu) par rapport au reste de ma page.

Je pensais qu'en mettant le conteneur en position: relative; et le contenu en position: absolute; j'allais arriver à obtenir l'effet désiré (qu'une petite partie de mon menu soit derrière le corps de la page) seulement ça fonctionnait bien sur mon ordinateur (1280x800) mais pas sur d'autres résolutions et encore moins avec lors du redimensionnement de la fenêtre...

Si je ne me trompe pas c'est à cause de cette fameuse position: absolute;
Mais je ne vois pas comment corriger ça et je ne refuserais pas un peu d'aide.

Pour que ce soit un peu plus clair, voici le lien

Si par ailleurs, vous voyez d'autres erreurs ou que vous avez des conseils, n'hésitez pas !
Modifié par Macxim (14 Nov 2010 - 17:40)

Macxim a écrit :
Je pensais qu'en mettant le conteneur en position: relative; et le contenu en position: absolute; j'allais arriver à obtenir l'effet désiré (qu'une petite partie de mon menu soit derrière le corps de la page)

Prenons les choses de manière logique, et pas dans le style mystique («j'utilise des machins qui ont l'air d'avoir un rapport et avec l'aide des esprits ça marchera»).

- Positionner le conteneur en relatif et un enfant en absolu permet de placer cet enfant à un endroit précis par rapport aux limites du conteneur. En l'occurrence ton conteneur prend toute la largeur de la page, donc quand tu utilises left:1110px ça place le bord gauche de ton élément à 1110px du bord gauche de la page.
- Pendant ce temps, la distance entre le bord droit de ton bloc de contenu principal et le bord gauche de la page est variable, et dépend de la largeur de la fenêtre du navigateur. Donc ça ne colle pas.

Tu as besoin de faire deux choses:
1. T'assurer que le menu est "plus profond" que le contenu principal dans l'empilement de la page. La profondeur, c'est l'axe Z (X pour la largeur, Y pour la hauteur). On utilise donc la propriété z-index, qui ne s'utilise qu'avec des éléments positionnés. (Ça veut dire que tes deux éléments doivent être positionnés soit en absolu, soit en relatif.)
2. Placer ton menu à droite, en dehors de la colonne principale de contenu qui elle est centrée. Le positionnement absolu est plutôt un bon choix pour ça, mais il est mal utilisé ici.

Merci pour tes précieux conseils Florent.
J'ai donc pour le bloc de contenu principal :

#block_1{
	z-index: 2;
	position: relative;
	width: 950px;
	}

Et pour le menu :

.navbox {
	z-index: 1;
	position: relative;
	left: 1100px;
	top: 80px;
	}

Ça devrait fonctionner, non ?

EDIT:Les valeurs les plus élevées sont au premier plan. Je m'étais trompé, j'ai modifié les valeurs. Mais quand je redimensionne ma fenêtre, j'aimerais que le menu bouge avec le reste de la page.
Modifié par Macxim (10 Nov 2010 - 19:24)

Il faut bien comprendre que l'empilement (Z) et le positionnement (X, Y) sont deux problématiques séparées. Ta solution à base de position:absolute pour placer le menu était bonne, mais ne peut marcher que si l'élément qui sert de référent au positionnement absolu, c'est à dire le plus proche ancêtre positionné, est un bloc de largeur fixe et centré.

Le plus proche ancêtre positionné est dans ce cas #main et j'ai :

#main{
	z-index: 1;
	background-color: #5C5C5C;
	position: relative;
	width: 950px;
	margin: 0 auto; 
	}
.navbox {
	z-index: 1;
	position: absolute;
	left: 940px;
	top: 80px;
	}

Ça semble fonctionner chez moi.
Quelqu'un peut me confirmer ?
Merci encore Florent !

Tu n'as pas besoin de z-index sur #main.
(Tu en as à priori besoin sur #block_1 et .navbox uniquement.)

Voilà, j'ai corrigé.
Ça a l'air d'être résolu !
Merci encore pour ton aide.
Modifié par Macxim (11 Nov 2010 - 13:55)

Bonjour à tous, j'ai ouvert de nouveau ce sujet parce que j'ai encore un problème de positionnement CSS concernant la même page.

J'ai utilisé ceci : jQuery Tooltip (que l'on peut trouver ici).

Seulement je ne comprends pas trop le positionnement des infos-bulles lorsque l'on passe sur les icônes des navigateurs (bordure rouge).

Je ne sais pas si c'est un problème de "margin" ou de "position" puisque que ça fonctionne parfaitement ici.

Si quelqu'un veut bien m'éclairer, je lui en serais reconnaissant.

Merci

Bonjour,

Si c'est un problème CSS différent de celui qu'indique ton titre («Div en-dessous d'une autre - position absolute/relative»), et que le problème décrit par le titre de ce sujet est résolu, je t'invite à:
- modifier le titre de ce sujet pour rajouter la mention «[Résolu]» (tu peux modifier le titre du sujet en modifiant le premier message, via le bouton «éditer»);
- ouvrir un nouveau sujet pour ton nouveau problème.