mozilla

Révision 448955 sur position

  • Raccourci de la révision : CSS/position
  • Titre de la révision : position
  • ID de la révision : 448955
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire
Étiquettes : 

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS position choisit des règles alternatives pour le positionnement des éléments. Elle a été élaborée pour les effets d'animation scriptés.

  • {{ Xref_cssinitial() }} static
  • S'applique à  tous les éléments
  • {{Xref_cssinherited()}} non
  • Média  {{Xref_cssvisual()}}
  • {{Xref_csscomputed()}}  comme spécifiée

Un élément positionné est un élément dont la propriété de position calculée est relative, absolute, ou fixed.

Un élément positionné en absolu est un élément dont la propriété de position calculée est absolute ou fixed.

Les propriétés {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }} et {{ Cssxref("left") }} spécifient la position des éléments positionnés.

Syntaxe

property: static | relative | absolute | fixed | inherit

Valeurs

static 
Comportement normal (par défaut).
relative 
Présente tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné).
absolute 
Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à son plus proche ancêtre positionné ou au bloc contenant initial {{ mediawiki.external('Ndt: s\'il est lui même positionné') }}.
fixed 
Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page ).

Exemples

Notes

Pour les éléments en position relative, les propriétés {{ Cssxref("top") }} ou {{ Cssxref("bottom") }} spécifient le décalage vertical depuis la position normale et les propriétés {{ Cssxref("left") }} ou {{ Cssxref("right") }} spécifient le décalage horizontal.

Pour les éléments en position absolue, les propriétés {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }} et {{ Cssxref("left") }} spécifient les décalages depuis le bord du bloc ancêtre positionné contenant l'élément (à partir duquel l'élément est positionné relativement). La marge de l'élément est alors positionnée à l'intérieur de ces décalages.

La plupart du temps, les éléments positionnés en absolu ont une valeur auto pour {{ Cssxref("height") }} et {{ Cssxref("width") }} calculée pour ajuster le contenu de l'élément. Cependant, des éléments non remplacés positionnés en absolu peut être conduits à remplir l'espace disponible en spécifiant (avec une valeur autre que auto) {{ Cssxref("top") }} et {{ Cssxref("bottom") }} et en laissant {{ Cssxref("height") }} non défini (donc valeur auto). Idem pour {{ Cssxref("left") }}, {{ Cssxref("right") }} et {{ Cssxref("width") }}.

Sauf pour les cas, juste décrits ci-dessus, des éléments positionnés en absolu remplissant l'espace disponible:

  • Si {{ Cssxref("top") }} et {{ Cssxref("bottom") }} sont toutes deux spécifiées (techniquement, différentes de auto), {{ Cssxref("top") }} prédomine.
  • Si {{ Cssxref("left") }} et {{ Cssxref("right") }} sont toutes deux spécifiées, {{ Cssxref("left") }} prédomine lorsque la {{ Cssxref("direction") }} est ltr (Left To Right : de gauche à droite, français, anglais, aponais horizontal, etc) et {{ Cssxref("right") }} prédomine lorsque la {{ Cssxref("direction") }} est rtl (Right To Left : de droite à gauche, arabe, hébreu, etc).

Spécifications

Compatibilité des navigateurs

Voir également

{{ Cssxref("display") }}, {{ Cssxref("float") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>position</code> choisit des règles alternatives pour le positionnement des éléments. Elle a été élaborée pour les effets d'animation scriptés.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> static</li>
  <li><dfn>S'applique à&nbsp;</dfn> tous les éléments</li>
  <li><dfn>{{Xref_cssinherited()}} </dfn>non</li>
  <li><dfn>Média&nbsp;</dfn> {{Xref_cssvisual()}}</li>
  <li><dfn>{{Xref_csscomputed()}}&nbsp;</dfn> comme spécifiée</li>
</ul>
<p>Un <b>élément positionné</b> est un élément dont la propriété de position <a href="fr/CSS/Valeur_calcul%c3%a9e">calculée</a> est <code>relative</code>, <code>absolute</code>, ou <code>fixed</code>.</p>
<p>Un <b>élément positionné en absolu</b> est un élément dont la propriété de position <a href="fr/CSS/Valeur_calcul%c3%a9e">calculée</a> est <code>absolute</code> ou <code>fixed</code>.</p>
<p>Les propriétés {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }} et {{ Cssxref("left") }} spécifient la position des éléments positionnés.</p>
<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
<pre class="eval">
property: static | relative | absolute | fixed | <a href="fr/CSS/inherit">inherit</a>
</pre>
<h3 id="Valeurs" name="Valeurs">Valeurs</h3>
<dl>
  <dt>
    static&nbsp;</dt>
  <dd>
    Comportement normal (par défaut).</dd>
  <dt>
    relative&nbsp;</dt>
  <dd>
    Présente tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné).</dd>
  <dt>
    absolute&nbsp;</dt>
  <dd>
    Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à son plus proche ancêtre positionné ou au bloc contenant initial {{ mediawiki.external('Ndt: s\'il est lui même positionné') }}.</dd>
  <dt>
    fixed&nbsp;</dt>
  <dd>
    Ne laisse pas d'espace pour l'élément. Au lieu de cela, le positionne à la position spécifiée relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour
    <i>
      chaque page</i>
    ).</dd>
</dl>
<h2 id="Exemples" name="Exemples">Exemples</h2>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Pour les éléments en position relative, les propriétés {{ Cssxref("top") }} ou {{ Cssxref("bottom") }} spécifient le décalage vertical depuis la position normale et les propriétés {{ Cssxref("left") }} ou {{ Cssxref("right") }} spécifient le décalage horizontal.</p>
<p>Pour les éléments en position absolue, les propriétés {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }} et {{ Cssxref("left") }} spécifient les décalages depuis le bord du bloc ancêtre positionné contenant l'élément (à partir duquel l'élément est positionné relativement). La marge de l'élément est alors positionnée à l'intérieur de ces décalages.</p>
<p>La plupart du temps, les éléments positionnés en absolu ont une valeur <code>auto</code> pour {{ Cssxref("height") }} et {{ Cssxref("width") }} calculée pour ajuster le contenu de l'élément. Cependant, des éléments non remplacés positionnés en absolu peut être conduits à remplir l'espace disponible en spécifiant (avec une valeur autre que <code>auto</code>) {{ Cssxref("top") }} et {{ Cssxref("bottom") }} et en laissant {{ Cssxref("height") }} non défini (donc valeur <code>auto</code>). Idem pour {{ Cssxref("left") }}, {{ Cssxref("right") }} et {{ Cssxref("width") }}.</p>
<p>Sauf pour les cas, juste décrits ci-dessus, des éléments positionnés en absolu remplissant l'espace disponible:</p>
<ul>
  <li>Si {{ Cssxref("top") }} et {{ Cssxref("bottom") }} sont toutes deux spécifiées (techniquement, différentes de <code>auto</code>), {{ Cssxref("top") }} prédomine.</li>
  <li>Si {{ Cssxref("left") }} et {{ Cssxref("right") }} sont toutes deux spécifiées, {{ Cssxref("left") }} prédomine lorsque la {{ Cssxref("direction") }} est <code>ltr</code> (Left To Right&nbsp;: de gauche à droite, français, anglais, aponais horizontal, etc) et {{ Cssxref("right") }} prédomine lorsque la {{ Cssxref("direction") }} est <code>rtl</code> (Right To Left&nbsp;: de droite à gauche, arabe, hébreu, etc).</li>
</ul>
<h2 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/visuren.html#choose-position">CSS 2 (fr)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position">CSS 2.1 (en)</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Cssxref("display") }}, {{ Cssxref("float") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p>
Revenir à cette révision