[Résolu] Positionnement absolu

Bonjour à toutes et à tous,

Une liste à puce positionnée en absolu de la manière suivante dans la feuille de style :

{position: absolute ; top: 0px; right: 0px}

devrait bien se comporter de la même manière quelque soit sa place dans la page html puisqu'elle n'est plus dans le flux, non ?
ici en l'occurence, tout le bloc <ul></ul> devrait se placer en haut et à droite de la fenêtre du navigateur...

Or j'obtiens des placement différents quand je change la place du code dans la page html et de plus en laissant le code à sa place, si je change la valeur de l'attribut top dans la feuille de style, rien ne se passe ??? par contre l'élément se déplace horizontalement en fonction de la valeur de l'attribut right ???

Il y a certainement une ou des subtilités concernant le positionnement que je n'ai pas dû bien saisir ???

Pour celles et ceux qui essaieront de m'aider, je précise qu'il s'agit d'un blog Wordpress que vous pouvez trouver ici, que la liste à puce en question correspond à la listes des icônes "Facebook" et "Flux RSS" située en haut à droite.

Merci
Olivier
Modifié par diaboliv (23 Nov 2010 - 16:59)

Bonjour,

Un élément positionné en absolu et placer par rapport au dernier élément positionné (en absolu ou en relatif), donc non, la position de l'élément peut varier suivant sa position dans le code s'il y a d'autres éléments positionnés avant.

Merci de ce premier élément de réponse, je vais aller regarder ça avec un oeil nouveau

bon, je comprend bien qu'un élément est positionné en fonction et de sa place dans le flux et de la position de son parent et du positionnement des éléments positionnés avant lui mais par contre ce que je n'arrive pas à comprendre, c'est pourquoi lorsque je modifie la valeur de la propriété top d'un conteneur <ul></ul> positionné en absolu, rien ne se passe alors que la modification de la propriété right a bel et bien un effet ???

En clair, qu'est ce qui pourrait bien m'empêcher de décaler vers le bas ou vers le haut ma liste à puce décrite comme ceci :

		<ul id="socialize-icons">
			<?php if(get_option('tbf1_icon_rss') || isset($_GET['preview'])):?>
            	<li id="icon-rss"><a href="<?php echo (get_option('tbf1_icon_rss')) ? get_option('tbf1_icon_rss') : bloginfo('rss2_url')?>">RSS Feed</a></li>
            <?php endif;?>
			<?php if(get_option('tbf1_icon_facebook') || isset($_GET['preview'])):?>
            	<li id="icon-facebook"><a href="<?php echo (get_option('tbf1_icon_facebook')) ? get_option('tbf1_icon_facebook') : '#'?>" rel="nofollow" target="_blank">facebook</a></li>
            <?php endif;?>
            <?php if(get_option('tbf1_icon_twitter') || isset($_GET['preview'])):?>
				<li id="icon-twitter"><a href="<?php echo (get_option('tbf1_icon_twitter')) ? get_option('tbf1_icon_twitter') : '#'?>" rel="nofollow" target="_blank">twitter</a></li>
            <?php endif;?>
		</ul>

#socialize-icons {position: absolute; top: 50px; right: 0px; list-style:none}

bonjour,

il y a des styles dans l'entête dont :

#socialize-icons {top: 228px !important }

GC

aahhhh merci GC, j'avoue que j'imaginais pas que ça puisse être caché dans le fichier functions.php...

D'ailleurs si quelqu'un peut éclairer ma lanterne sur la valeur de la propriété suivante :
{top: 200px !important}

En tous cas merci encore GC, j'ai pu enfin décaler mes icônes vers le bas et les insérer du même coup dans la barre de navigation sans être obligé de toucher à mon entête http://www.gtweb-live.com/forum/images/smilies/jpn.gif

@+
Olivier