Si les éléments n'ont pas de propriétés de style de positionnement, ils sont disposés du haut vers le bas sur la page et de gauche à droite ou de droite à gauche, selon le paramètre de l'attribut dir de la page, de l'élément de conteneur ou du paramètre de langue du navigateur. N'importe quel navigateur Web peut afficher des documents HTML utilisant cette mise en page. Les éléments sont parfois repositionnés lorsque la page est redimensionnée.

Si vous utilisez la mise en page fluide pour votre page, vous pouvez aligner des éléments à l'intérieur d'un élément table ou utiliser un élément div avec le style de positionnement ou les propriétés d'alignement du texte. Toutefois, les éléments ne peuvent pas se chevaucher. Les éléments peuvent se déplacer lorsque la page est redimensionnée, selon que vous utilisez des unités absolues ou des pourcentages pour les largeurs de la table et des cellules.

Vous pouvez appliquer des options de positionnement aux éléments, ce qui vous permet de placer ces éléments à des emplacements précis sur la page.

Vous pouvez également spécifier des options de positionnement pour tous les nouveaux éléments ajoutés à la page.

L'outil de développement de Microsoft Visual Web Developer Web vous permet de spécifier des options de positionnement qui correspondent à celles que la spécification W3C définit pour les feuilles de style en cascade. Les options de positionnement sont valides dans tous les navigateurs qui implémentent la norme HTML 4.0 du W3C, y compris ceux qui prennent en charge XHTML 1.1.

Les options sont les suivantes :

• absolute

  L'élément est rendu à un emplacement sur la page défini par toute combinaison des propriétés de style left, right, top et bottom. La position 0,0 est définie en fonction du parent de l'élément actuel. Le parent est le premier élément de conteneur qui a des informations de positionnement. Par exemple, si l'élément actuel est à l'intérieur d'un élément div avec des informations de positionnement, le positionnement absolu est calculé selon la position de l'élément div. Si l'élément actuel n'a aucun élément de conteneur avec positionnement, les informations de positionnement sont calculées en fonction de l'élément body.

• relative

  L'élément est rendu à un emplacement sur la page défini par les propriétés de style left et top. Cette option est différente de l'option absolute dans la mesure où la position 0,0 est définie par rapport à l'emplacement de l'élément dans l'enchaînement de la page. Un élément avec un positionnement relatif et dont les propriétés top et left ont la valeur 0 apparaît normalement dans l'enchaînement.

  Remarque :

  Les éléments qui utilisent le positionnement absolu ou relatif peuvent apparaître de façon désordonnée sur la page par rapport à leur déclaration dans le balisage de la page, ce qui peut provoquer des confusions. Par exemple, en mode Source, vous pouvez définir un bouton en tant que premier élément du balisage, mais après avoir défini son positionnement, le bouton peut apparaître en tant que dernier élément sur la page rendue ou en mode Design.

• static

  L'élément est rendu à l'aide de la mise en page fluide, c'est-à-dire qu'il n'utilise pas le positionnement en deux dimensions. Vous pouvez sélectionner cette option si vous souhaitez définir une option de positionnement pour un contrôle qui substitue un paramètre hérité d'un thème ou d'une feuille de style.

Visual Web Developer offre également l'option de positionnement Not Set, qui vous permet de supprimer les informations de positionnement existantes d'un contrôle ou de contrôles pouvant être ajoutés ultérieurement.

Pour vous permettre de créer du texte statique flottant ou des groupes d'éléments en tant qu'unité, vous pouvez ajouter une couche à la page. Une couche est un élément div avec des informations de positionnement incluses, ce qui vous permet de le déplacer sur la page. Vous pouvez ensuite taper du texte ou faire glisser des éléments dans l'élément div. Visual Web Developer inclut une commande dans le menu Format pour ajouter une couche, ou vous pouvez créer l'élément div vous-même et lui ajouter manuellement des informations de positionnement.

Si vous utilisez le positionnement absolu ou relatif et si vous utilisez des pixels comme base de positionnement (autrement dit, les unités des propriétés left et top sont des pixels), vous pouvez définir une option pour aligner les éléments sur une grille invisible. Cela facilite l'alignement des éléments sur la page. Pour plus d'informations, consultez Position CSS, Concepteur HTML, boîte de dialogue Options.

Si vous utilisez le positionnement absolu ou relatif, vous pouvez superposer des éléments ; ainsi, ils apparaîtront de cette façon dans le navigateur. Si vous positionnez les éléments à l'aide d'une table, vous ne pouvez pas superposer des objets.

Les éléments utilisant le positionnement absolu ou relatif peuvent inclure une propriété z-index qui spécifie l'ordre, de l'arrière vers l'avant, de l'élément dans une troisième dimension. Si deux éléments partagent le même espace, l'élément avec la valeur de l'attribut index-Z la plus haute est affiché devant. Si vous utilisez des commandes en mode Design pour définir le positionnement, la propriété z-index est définie automatiquement, en démarrant avec 100 pour l'élément le plus en arrière. Si vous ajoutez des propriétés de positionnement en mode Source, vous devez ajouter la propriété z-index manuellement.

Tâches

Référence