Générateurs
Bannières animéesImages gifs à effet gratuitBoutons images htmlTitres Web 2.0Badges Web 2.0Signatures pour forumsImages perso pour forums (avatar)Effets et filtres sur imageCartes Google MapsRibbons (Bandeaux) web 2.0Boutons de partage bookmark
Référencement
Top liste/sitePageRank GoogleCe que voient les moteurs de rechercheExtracteur de liensEntêtes HTTPBalises meta tagsFlash
Lecteur de vidéos flv, mov... en flashMenu flash Web 2.0Lecteur de musique MP3 en flashBoutons flashHorloges Flash analogique et numetiquesCode flashServices
Livre d'orNews (Nouvelles)Tchat AjaxSondagesModule de commentairesVotes (Module de notation)Compteurs
Compteur Global gratuit sans inscriptionCompteur de visiteurs sans inscriptionCompteur de visites sans inscriptionCompteur de pages vues sans inscriptionCompteur de clicsCompteur de connectés (Live)
Propriété position et z-index en css tutoriel (X)html/CSS |
|---|
Propriété position et z-index en css tutoriel (X)html/CSSNote : 3.5/5 (1 vote) Derniéres modifications : 11/02/2012 à 20:02:35 Mots-Clés : position css absolute fixed static relative zindex calques propriété position top left bottom right Dans ce tutoriel, je vais vous apprendre à modifier la position d'éléments html(div) mais aussi de modifier l'ordre des éléments comme des calques(layers). Pour modifier la position d'un élément en CSS, il faut simplement utiliser la propriété CSS position. La propriété CSS position peut avoir plusieurs valeurs:
static la valeur static est la valeur par défaut pour la propriété position en CSS. Elle dis simplement que l'élément est statique. absolute La valeur absolute signifie que la position de l'élément sera faite par rapport à la page au complet. relative La valeur relative signifie que la position de l'élément sera faite par rapport à sa position d'origine. fixed La valeur fixed signifie que la position de l'élément sera faite par rapport à canvas de la page. En gros, c'est la même chose que absolute sauf que lorsque vous défilerez la page, l'élément restera fixe. Bon maintenant vous connaissez comment définir le type de positionnement. Je vais vous montrer comment positionner un élément. Il existe quatre propriétés CSS pour faire ça:
Vous l'aurez compris, top nous permet de déplacer notre élément par rapport au point d'origine top. le point d'origine top peut varier selon le type de positionnement comme dis plus haut. Les propriétés top,right,bottom et left ne peuvent pas être utilisée lorsque le type de positionnement de l'élément est statique. Bon voici des exemples et leurs codes: Code: (X)html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Position d'éléments en CSS</title> <style type="text/css"> * { margin:0px; padding:0px; } body { padding-left:5px; } .remarque { background:#a0ffa0; border:1px solid #508050; padding:3px; } .parent_1, .parent_2, .parent_3, .parent_4 { border:1px solid #999999; background:#cccccc; padding:5px; margin:10px; width:500px; } .elem_1, .elem_2, .elem_3, .elem_4 { border:1px solid #666666; background:#999999; padding:5px; } .elem_1 { position:absolute; top:40px; } .elem_2 { position:relative; top:30px; left:100px; } .elem_3 { position:fixed; top:5px; right:5px; } .elem_4 { position:static; } </style> </head> <body> <h1>Utiliser les positions en CSS</h1> <br /><br /><br /> <div class="parent_1"> Parent de l'élément 1 <div class="elem_1"> Élement 1 en position absolute Top:40px <div class="remarque"> <em>Remarque</em>: Position par raport à la page complète. </div> </div> </div> <br /><br /><br /> <div class="parent_2"> Parent de l'élément 2 <div class="elem_2"> Élement 2 en position relative Top:30px Left:100px <div class="remarque"> <em>Remarque</em>: Position par raport à sa position normale </div> </div> </div> <br /><br /><br /> <div class="parent_3"> Parent de l'élément 3 <div class="elem_3"> Élement 3 en position fixed Top:0px Right:0px <div class="remarque"> <em>Remarque</em>: Reste fixe(ne bouge pas) lors du défilement de la page.<br/>Position par rapport à la page complète. </div> </div> </div> <br /><br /><br /> <div class="parent_4"> Parent de l'élément 4 <div class="elem_4"> Élement 4 en position static<br /> <div class="remarque"> <em>Remarque</em>: Valeur par défaut, aucun changement. </div> </div> </div> <br /><br /><br /> Défilez la page pour voir l'effet de l'élément 3 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body> </html> Modifier l'ordre des calques Pour modifier l'ordre des élément, il existe la propriété CSS z-index. La propriété z-index permet de jouer avec les élément comme des calques(layers) dans un logiciel d'imagerie. Z-index peut avoir comme valeur un nombre entier pouvant être négatif et positif. La valeur par défaut de z-index est 0. La propriété z-index ne peut pas être utilisée lorsque le type de positionnement de l'élément est statique. c'est un peu comme les quatre propriétés pour positionner un élément sauf que là, il s'agit d'un positionnement dans l'axe des Z(profondeur). Si nous avons deux éléments, celui ayant le plus grand z-index sera placé devant. Bon voici encore une fois des exemples et leur codes: Code: (X)html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Les calques en CSS avec le z-index</title> <style type="text/css"> * { margin:0px; padding:0px; } body { padding-left:5px; } .remarque { background:#a0ffa0; border:1px solid #508050; padding:3px; } .elem_1, .elem_2, .elem_3, .elem_4 { border:1px solid #666666; background:#999999; padding:50px; width:200px; text-align:center; } .elem_1 { position:static; z-index:200; } .elem_2 { position:absolute; top:100px; left:200px; z-index:5; } .elem_3 { position:relative; top:-70px; left:195px; z-index:-5; } .elem_4 { position:fixed; top:200px; left:400px; z-index:10; } </style> </head> <body> <h1>Les calques(z-index) en CSS</h1> <br /><br /><br /><br /><br /><br /><br /><br /> <div class="elem_1"> Un calque en position static avec un z-index de 200 </div><br /> <div class="elem_2"> Un calque en position absolute avec un z-index de 5 </div><br /> <div class="elem_3"> Un calque en position relative avec un z-index de -5 </div><br /> <div class="elem_4"> Un calque en position fixed avec un z-index de 10 </div><br /> </body> </html> La position fixed ne fonctionne pas sous Internet Explorer. Pour toutes questions ou commentaires, contacter moi par MP, en utilisant le formulaire de contact ou encore vous pouvez poser votre problème dans le forum. Merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile. Scripts et tutoriaux similaires à celui ci:
CommentairesAjouter un commentaireLes commentairesEnvoyé par yohann le 19/10/2009 à 15:00:13
je viens de suivre ton post -->http://www.supportduweb.com/scripts_tutoriaux-code-source-52-propriete-position-et-z-index-en-css-tutoriel-x-html-css.html
mais je voulais savoir si il y avait une solution pour que le position fixed fonctionne sur internet explorer ? Envoyé par ybouane le 18/11/2009 à 04:32:04
Bonjour,
regarde ces liens(désolé, certains sont en anglais): http://tagsoup.com/cookbook/css/fixed/ http://www.howtocreate.co.uk/fixedPosition.html http://www.alsacreations.com/astuce/lire/58-position-fixed-sur-internet-explorer-6.html Merci :) Envoyé par jozzy-online le 02/03/2010 à 15:01:52
ce que je cherchais, merci
Envoyé par Spitfire 95 le 24/06/2010 à 16:25:26
"La position fixed ne fonctionne pas sous Internet Explorer."
Je ne comprends pas l'intérêt de cette phrase. Dire "La position fixed fonctionne sous IE." aurait eu un sens, mais ne fonctionne pas, c'est comme déclarer un z-index de 0 : par défaut, on sais que rien ne marche sous IE. ^^ Puis plutôt que se casser la tête à faire comprendre à IE le position:fixed;, et autres balises trop modernes (ou même les anciennes, il ne les comprends pas toujours, comme bgcolor), j'ai trouvé une solution simple, mais efficace : j'ai créé une image "site optimisé pour Google Chrome", avec un lien vers la page de téléchargement de Chrome. Et d'une pierre deux coups, mon image m'évite même de devoir mettre des -moz-border-radius pour FF, qui ne comprend, hélas, toujours pas le CSS3. PS : Pourquoi ne peut-on pas mettre d'url dans nos commentaires ? Envoyé par ybouane le 10/07/2010 à 05:48:22
Bonjour,
Parce qu'il y a trop de spam.(la moitié des commentaires étaient des spam avant que je ne prenne cette mesure). Sinon, pour Google Chrome, il est vrai qu'il est l'un des seuls(avec Safari) navigateurs qui prennent en charge la très grande partie des fonctions de l'HTML 5, mais google chrome ne représente qu'environ 6% des navigateurs. Cordialement :) Envoyé par M'sieur Toph' le 17/11/2010 à 21:14:46
Pour faire fonctionner la position fixed sur IE, il faut définir un !DOCTYPE.
C'est la première ligne du code source. Info trouvée sur cette page : w3schools[dot]com/Css/css_positioning.asp "Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified." Envoyé par M'sieur Toph' le 17/11/2010 à 21:28:21
... en tout cas sous IE 8
Envoyé par Jimmy le 02/02/2011 à 16:05:22
MERCI !!!
Enfin trouvé ... sa fait toute la journée que je cherche se foutu positionnement d'élément, dans mon cas ses un compteur de visite avec les balise <script> . Merci encore ! Envoyé par airitaex le 24/01/2012 à 12:30:08
20
Envoyé par pluni le 28/03/2012 à 20:30:41
Je ne connais plus rien en htlm du fait de maladie.
Le problème est le suivant: ne pouvant plus bien lire et lisant très lentement, mes enfants ont mis des prières en htlm avec un bouton de player ce qui me permet d'agrandir les lettre à la bonne taille et parallélement écouter le texte lu. Malheureusement le bouton est fixe et donc je ne peux pas faire de pause. Ils ont ajoutész plusieurs boutons; mais le probleme reste. Pouvez vous nous aider ? Cela me rendrait un énorme service Je joins une petite partie d'une page (en hebreu) vous verrez le bouton; pouvez vous faire concrétement sur cet exemple se déplacer le bouton du player A partir de la mes enfants pourrons adapter chaque page Merci infiniment Envoyé par pluni le 28/03/2012 à 20:37:00
j'ai oublié de joindre l'exemple
<div align=right dir=rtl> <object data="hbs_mp3_player.swf" width="48" height="10" type="application/x-shockwave-flash"> <param name="FlashVars" value="TheSound=tehilim_le_elicha.mp3" /> </object> <b> <div align=right dir=rtl> <br>תְּהִלָּה, לְדָוִד <br> אֲרוֹמִמְךָ אֱלוֹהַי הַמֶּלֶךְ וַאֲבָרְכָה שִׁמְךָ, לְעוֹלָם וָעֶד <br>בְּכָל-יוֹם אֲבָרְכֶךָּ וַאֲהַלְלָה שִׁמְךָ, לְעוֹלָם וָעֶד <br>גָּדוֹל יְהוָה וּמְהֻלָּל מְאֹד וְלִגְדֻלָּתוֹ, אֵין חֵקֶר <br>דּוֹר לְדוֹר, יְשַׁבַּח מַעֲשֶׂיךָ וּגְבוּרֹתֶיךָ יַגִּידוּ <br>הֲדַר, כְּבוֹד הוֹדֶךָ-- וְדִבְרֵי נִפְלְאֹתֶיךָ אָשִׂיחָה <br>וֶעֱזוּז נוֹרְאֹתֶיךָ יֹאמֵרוּ וגדלותיך (וּגְדֻלָּתְךָ) אֲסַפְּרֶנָּה <br>זֵכֶר רַב-טוּבְךָ יַבִּיעוּ וְצִדְקָתְךָ יְרַנֵּנוּ <br>חַנּוּן וְרַחוּם יְהוָה אֶרֶךְ אַפַּיִם, וּגְדָל-חָסֶד <br>טוֹב-יְהוָה לַכֹּל וְרַחֲמָיו, עַל-כָּל-מַעֲשָׂיו <br>יוֹדוּךָ יְהוָה, כָּל-מַעֲשֶׂיךָ וַחֲסִידֶיךָ, יְבָרְכוּכָה <br> כְּבוֹד מַלְכוּתְךָ יֹאמֵרוּ וּגְבוּרָתְךָ יְדַבֵּרוּ <br>לְהוֹדִיעַ, לִבְנֵי הָאָדָם--גְּבוּרֹתָיו וּכְבוֹד, הֲדַר מַלְכוּתוֹ <br>מַלְכוּתְךָ, מַלְכוּת כָּל-עֹלָמִים וּמֶמְשַׁלְתְּךָ, בְּכָל-דּוֹר וָדֹר <br> סוֹמֵךְ יְהוָה, לְכָל-הַנֹּפְלִים וְזוֹקֵף, לְכָל-הַכְּפוּפִים <br> עֵינֵי-כֹל, אֵלֶיךָ יְשַׂבֵּרוּ וְאַתָּה נוֹתֵן-לָהֶם אֶת-אָכְלָם בְּעִתּוֹ <br> פּוֹתֵחַ אֶת-יָדֶךָ וּמַשְׂבִּיעַ לְכָל-חַי רָצוֹן <br>צַדִּיק יְהוָה, בְּכָל-דְּרָכָיו וְחָסִיד, בְּכָל-מַעֲשָׂיו <br>קָרוֹב יְהוָה, לְכָל-קֹרְאָיו-- לְכֹל אֲשֶׁר יִקְרָאֻהוּ בֶאֱמֶת <br>רְצוֹן-יְרֵאָיו יַעֲשֶׂה וְאֶת-שַׁוְעָתָם יִשְׁמַע, וְיוֹשִׁיעֵם <br>שׁוֹמֵר יְהוָה, אֶת-כָּל-אֹהֲבָיו וְאֵת כָּל-הָרְשָׁעִים יַשְׁמִיד <br>תְּהִלַּת יְהוָה, יְדַבֶּר-פִּי וִיבָרֵךְ כָּל-בָּשָׂר, שֵׁם קָדְשׁוֹ--לְעוֹלָם וָעֶד <פ> תהילים צב <br>מִזְמוֹר שִׁיר, לְיוֹם הַשַּׁבָּת <br> טוֹב, לְהֹדוֹת לַיהוָה וּלְזַמֵּר לְשִׁמְךָ עֶלְיוֹן <br> לְהַגִּיד בַּבֹּקֶר חַסְדֶּךָ וֶאֱמוּנָתְךָ, בַּלֵּילוֹת <br> עֲלֵי-עָשׂוֹר, וַעֲלֵי-נָבֶל עֲלֵי הִגָּיוֹן בְּכִנּוֹר <br> כִּי שִׂמַּחְתַּנִי יְהוָה בְּפָעֳלֶךָ בְּמַעֲשֵׂי יָדֶיךָ אֲרַנֵּן <br> מַה-גָּדְלוּ מַעֲשֶׂיךָ יְהוָה מְאֹד, עָמְקוּ מַחְשְׁבֹתֶיךָ <br> אִישׁ-בַּעַר, לֹא יֵדָע וּכְסִיל, לֹא-יָבִין אֶת-זֹאת <br> בִּפְרֹחַ רְשָׁעִים, כְּמוֹ עֵשֶׂב, וַיָּצִיצוּ, כָּל-פֹּעֲלֵי אָוֶן לְהִשָּׁמְדָם עֲדֵי-עַד <br> וְאַתָּה מָרוֹם-- לְעֹלָם יְהוָה <br> כִּי הִנֵּה אֹיְבֶיךָ, יְהוָה-- כִּי-הִנֵּה אֹיְבֶיךָ יֹאבֵדוּ יִתְפָּרְדוּ, כָּל-פֹּעֲלֵי אָוֶן<br> <br> וַתָּרֶם כִּרְאֵים קַרְנִי בַּלֹּתִי, בְּשֶׁמֶן רַעֲנָן <br> וַתַּבֵּט עֵינִי, בְּשׁוּרָי <br> בַּקָּמִים עָלַי מְרֵעִים-- תִּשְׁמַעְנָה אָזְנָי <br> צַדִּיק, כַּתָּמָר יִפְרָח כְּאֶרֶז בַּלְּבָנוֹן יִשְׂגֶּה <br> שְׁתוּלִים, בְּבֵית יְהוָה בְּחַצְרוֹת אֱלֹהֵינוּ יַפְרִיחוּ <br> עוֹד, יְנוּבוּן בְּשֵׂיבָה דְּשֵׁנִים וְרַעֲנַנִּים יִהְיוּ <br> לְהַגִּיד, כִּי-יָשָׁר יְהוָה צוּרִי, וְלֹא-עלתה (עַוְלָתָה) בּוֹ <br><br>קמה <br><br>צג <br>יְהוָה מָלָךְ, גֵּאוּת לָבֵשׁ <br>לָבֵשׁ יְהוָה, עֹז הִתְאַזָּר אַף-תִּכּוֹן תֵּבֵל, בַּל-תִּמּוֹט נָכוֹן כִּסְאֲךָ מֵאָז מֵעוֹלָם אָתָּה <br> נָשְׂאוּ נְהָרוֹת, יְהוָה--נָשְׂאוּ נְהָרוֹת קוֹלָם יִשְׂאוּ נְהָרוֹת דָּכְיָם <br> מִקֹּלוֹת, מַיִם רַבִּים--אַדִּירִים מִשְׁבְּרֵי-יָם אַדִּיר בַּמָּרוֹם יְהוָה <br> עֵדֹתֶיךָ, נֶאֶמְנוּ מְאֹד--לְבֵיתְךָ נַאֲוָה-קֹדֶשׁ יְהוָה, לְאֹרֶךְ יָמִים <br> </body> </html> |
