Positionnement CSS (CSS-P) de DHTML

CSS est utilisé pour ajouter des styles aux éléments HTML.

Exemple

notes :La plupart des exemples DHTML nécessitent IE 4.0+、Netscape 7+ ou Opera 7+ !

position:relative
Comment positionner cet élément par rapport à sa position normale.
position:relative
Comment positionner tous les titres par rapport à leur position normale.
position:absolute
Comment définir un élément en utilisant une valeur absolue.

Vous pouvez trouver plus d'exemples en bas de la page.

Quelles propriétés peuvent être utilisées avec CSS-P ?

Tout d'abord, cet élément doit spécifier l'attribut position (relative ou absolute).

Ensuite, je peux définir les propriétés CSS-P suivantes :

  • left - Position de la gauche de l'élément
  • top - Position du sommet de l'élément
  • visibility - Déterminer si un élément doit être visible ou caché
  • z-index - Ordre d'empilement des éléments
  • clip - Coupe des éléments
  • overflow - Comment gérer le contenu dépassant

Position

L'attribut position de CSS permet de contrôler la position d'un élément dans le document.

position:relative

L'attribut position:relative permet de positionner cet élément par rapport à la position actuelle de l'élément.

L'exemple suivant place cet élément div à 10 pixels à droite de sa position normale.

div
{
position:relative;
left:10;
}

position:absolute

L'attribut position:absolute positionne un élément en fonction de la marge par rapport à la fenêtre.

L'exemple suivant place cet élément div à 10 pixels à droite de la marge droite de son conteneur.

div
{
position:absolute;
left:10;
}

Visibility

L'attribut visibility détermine si un élément est visible ou non.

visibility:visible

L'attribut visibility: visible rend un élément visible.

h1
{
visibility:visible;
}

visibility:hidden

L'attribut visibility: hidden rend un élément invisible.

h1
{
visibility:hidden;
}

Z-index

L'attribut z-index est utilisé pour placer un élément après un autre. La valeur par défaut de z-index est 0. Plus la valeur est élevée, plus la priorité est élevée. z-index: -1 a une priorité inférieure.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

Dans l'exemple ci-dessus, si h1 et h2 se superposent, l'élément h2 se trouvera au-dessus de h1.

Filtres

L'attribut filter permet d'ajouter des effets de style supplémentaires aux textes et aux images.

h1
{
width:100%;
filter:glow;
}

notes :Pour utiliser l'attribut filter, veuillez toujours spécifier la largeur de l'élément.

les exemples ci-dessus produisent le résultat suivant :

en-tête

différents filtres

notes :À moins que l'attribut background-color ne soit défini sur transparent, certains attributs Filter ne fonctionneront pas !

attributs paramètres description exemple
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 permet de définir la transparence de l'élément 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 flouir l'élément 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color rendre une couleur spécifiée transparente 
filter:chroma(
color=#ff0000)
fliph none inverser horizontalement l'élément filter:fliph;
flipv none inverser verticalement l'élément filter:flipv;
glow
  • color
  • strength
 faire briller l'élément 
filter:glow(
color=#ff0000,
strength=5);
gray none afficher des éléments en noir et blanc filter:gray;
invert none afficher des éléments avec des valeurs de couleur et de luminosité inversées filter:invert;
mask color afficher des éléments avec un fond de couleur spécifié et une transparence de premier plan 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 afficher des éléments avec une ombre 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 afficher des éléments avec une ombre 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 afficher les éléments en forme d'onde 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Affichez les éléments avec des valeurs de couleur inversée et de luminosité en noir et blanc. filter:xray;

Background

L'attribut background vous permet de choisir votre propre fond.

background-attachment:scroll

Le fond bouge lorsque la page est déplacée.

background-attachment:fixed

Le fond ne bouge pas lorsque la page est déplacée.

Plus d'exemples

Visibility
Comment rendre un élément invisible. Voulez-vous que cet élément soit visible ou non ?
Z-index
Z-index peut être utilisé pour placer un élément après un autre élément, en utilisant l'ordre Z-index.
Z-index
Regardez, l'ordre Z-index de l'élément a changé.
Cursors
Changez le style du curseur à l'aide de CSS.
Filtres
Utilisez l'attribut filter pour changer le style des titres.
Filtres sur les images
L'attribut filter peut également être appliqué aux images, voici quelques exemples d'images appliquant l'attribut filter.
Watermark
L'image de fond ne bouge pas lorsque la page est déplacée.