[Résolu] Position:absolute; => forcément au dessus des autres blocs

salut !

Voilà mon soucis

J'ai un logo (image + lien) , dont l'image a un attribut position:absolute;.

Dans le header, j'ai un menu. Le soucis est que quand on augmente la taille des polices et donc la taille des liens du menus, ceux-ci vont en dessous du logo qui est en absolute.

J'aimerai donc savoir si il n'y a pas la possibilité de faire passer les liens au dessus du logo (sachant que le tout est dans un header avec une image de fond, qui lui doit etre en dessous du menu et du logo )

merci d'avance !
Modifié par vin-moi (03 Jul 2007 - 19:28)

Bonjour,
la propriété z-index est faite pour ça: (plus le valeur (ici un chiffre) est importante,
plus l'élément qui en est pourvu avance dans un l'axe z, donc passe au premier plan:

#menu {position:relative; z-index:3;}

Cette propriété ne peut être utilisée que conjointement à une propriété de
positionnement autre que static (relative, fixed ou absolute)
Modifié par Hermann (01 Jul 2007 - 16:48)

Salut,

merci pour ta réponse !

Malheureusement cela n'a pas l'air de fonctionner avec un bloc en position absolute

Bonjour,

Te serait-il possible d'indiquer un lien et/ou un morceau de code ?
Car en l'état actuel, il est difficile de t'aider...

Oui désolé

Alors,

J'ai sur ma page un logo :

<a href="#"><img src="images/logo.gif" id="logo" /></a>

Avec les propriétés suivantes :

#logo {
	position:absolute;
	top:55px;
	right:14px;
	width:108px;
	height:100px;
	border:0;
}

Et j'ai différents liens du genre :

<a href="#">Accueil</a>

avec la propriété :

#header_bottom a {
	float:left;
	display:block;
	background:url(images/menu_left.gif) no-repeat left top;
	padding:5px 15px 4px 15px;
	white-space:nowrap;
	color:#009DEA;
	font-weight:bold;
}

Il s'agit d'onglets. et en fait, quand on zoome les polices, les onglets passe en dessous du logo, mais j'aimerai que ca passe au dessus

Vous avez une idée ?

merci d'avance !

Tu as bien testé en positionnant (en absolu ou relatif) à la fois #logo et #header_bottom, et en jouant sur les z-index ? Ou juste avec un z-index sur #logo ?

Sinon, une remarque : le code pour ton logo est soit simplifié, soit pas optimal. Tu pourrais faire ceci :

<a href="# "id="logo"><img src="images/logo.gif" alt="[i]Texte alternatif pertinent[/i]" /></a>

merci bien !

J'avais oublié de préciser position:relative pour l'autre

c'est également corrigé pour le lien !

Merci pour votre précieux coup de main !

Ton problème est donc [Résolu] ?

oui merci ! j'édite cela