CSS - Positionnement et calques



CSS vous aide à positionner votre élément HTML. Vous pouvez mettre n'importe quel élément HTML à l'endroit que vous voulez. Vous pouvez spécifier si vous voulez que l'élément soit positionné par rapport à sa position naturelle dans la page ou absolue en fonction de son élément parent.


Maintenant, nous allons voir toutes les propriétés liées au positionnement CSS avec des exemples -

Positionnement relatif :

Le positionnement relatif modifie la position de l'élément HTML par rapport à l'endroit où elle apparaît normalement. Donc "left: 20" ajoute 20 pixels à la position LEFT de l'élément.

Vous pouvez utiliser deux valeurs en haut et en bas avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.

Déplacer vers la gauche - Utilisez une valeur négative pour la gauche.
Déplacer vers la droite - Utilisez une valeur positive pour la gauche.
Déplacer vers le haut - Utiliser une valeur négative pour le haut.
Déplacer vers le bas - Utiliser une valeur positive pour le haut.

REMARQUE - Vous pouvez utiliser les valeurs du bas ou de la droite de la même manière que le haut et la gauche.

Voici l'exemple –

<html>
   <head>
   </head>
   <body>
      <div style="position:relative;left:80px;top:2px;background-color:yellow;">
          Cette div a un positionnement relatif.    
      </div>
   </body>
</html>

Résultat :

                       Cette div a un positionnement relatif.


Positionnement absolu :

Un élément avec la position: absolute est positionné aux coordonnées indiquées par rapport à votre écran en haut à gauche.

Vous pouvez utiliser deux valeurs en haut et en bas avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.

Déplacer vers la gauche - Utilisez une valeur négative pour la gauche.
Déplacer vers la droite - Utilisez une valeur positive pour la gauche.
Déplacer vers le haut - Utiliser une valeur négative pour le haut.
Déplacer vers le bas - Utiliser une valeur positive pour le haut.


REMARQUE - Vous pouvez utiliser les valeurs du bas ou de la droite de la même manière que le haut et la gauche.
Voici un exemple –
<html>
   <head>
   </head>
   <body>
      <div style="position:absolute; left:80px; top:20px; background-    color:yellow;">
      Cette div a positionnement absolu.
      </div>
   </body>
</html>
Résultat:



            Cette div a positionnement absolu.



Positionnement fixe :

Le positionnement fixe vous permet de fixer la position d'un élément à un endroit particulier de la page, indépendamment du défilement. Les coordonnées spécifiées seront relatives à la fenêtre du navigateur.

Vous pouvez utiliser deux valeurs en haut et en bas avec la propriété position pour déplacer un élément HTML n'importe où dans le document HTML.

Déplacer vers la gauche - Utilisez une valeur négative pour la gauche.
Déplacer vers la droite - Utilisez une valeur positive pour la gauche.
Déplacer vers le haut - Utiliser une valeur négative pour le haut.
Déplacer vers le bas - Utiliser une valeur positive pour le haut.
REMARQUE - Vous pouvez utiliser les valeurs du bas ou de la droite de la même manière que le haut et la gauche.

Voici un exemple –

<html>
   <head>
   </head>
   <body>
      <div style="position:fixed; left:80px; top:20px; background-color:yellow;">
      Cette div a un positionnement fixe.
      </div>
   </body>
</html>

Les Calques en CSS : z-index
CSS vous donne la possibilité de créer des couches de divisions différentes. Les couches CSS se rapportent à l'application de la propriété z-index aux éléments qui se chevauchent les uns avec les autres.

La propriété z-index est utilisée avec la propriété position pour créer un effet de couches. Vous pouvez spécifier quel élément doit venir au-dessus et quel élément doit venir en bas.

Une propriété z-index peut vous aider à créer des mises en page Web plus complexes. Voici l'exemple qui montre comment créer des calques en CSS.



<!DOCTYPE html>
 
<html>
   <head>
         <style>
         #box1 { background-color:red; 
                 width:300px; height:100px; 
                 position:relative;top:10px; 
                 left:100px; z-index:2;}
         #box2 { background-color:yellow; 
                 width:300px; height:100px;
                 position:relative; top:-130px; 
                 left:5px; z-index:1;}
         #box3 { background-color:green;
                 width:300px; height:100px; 
                 position:relative; top:-200px; 
                 left:180px; z-index:3;}
          </style>
   </head>
   <body>
      <div id= "box1" >
           <p style ="color:#fff">calque niveau 2</p>
      </div>
      
      <div id= "box2" >
<p style ="color:#000">calque niveau 1</p>
      </div>
      
      <div  id = "box3">
           <p style ="color:#fff">calque niveau 3</p>
      </div>
   </body>
</html>       
      <div  id =”box3” >
      </div>
   </body>
</html>
Résultat :





Aucun commentaire

Inscription à : Articles ( Atom )
Fourni par Blogger.