Posizionamento CSS (CSS-P) di DHTML

CSS viene utilizzato per aggiungere stili agli elementi HTML.

Esempio

nota:La maggior parte degli esempi DHTML richiede IE 4.0+、Netscape 7+ o Opera 7+!

position:relative
Come posizionare questo elemento rispetto alla sua posizione normale.
position:relative
Come posizionare tutti i titoli rispetto alla loro posizione normale.
position:absolute
Come definire un elemento utilizzando un valore assoluto.

Puoi trovare più esempi nella parte inferiore della pagina.

Quali attributi possono essere utilizzati insieme a CSS-P?

Prima di tutto, questo elemento deve avere l'attributo 'position' specificato (relative o absolute).

Poi, posso impostare i seguenti attributi CSS-P:

  • left - La posizione sinistra dell'elemento
  • top - La posizione superiore dell'elemento
  • visibility - Specificare se l'elemento deve essere visibile o nascosto
  • z-index - L'ordine di sovrapposizione degli elementi
  • clip - Tagliare l'elemento
  • overflow - Come gestire i contenuti overflow

Position

L'attributo 'position' di CSS ti permette di controllare la posizione di un elemento nel documento.

position:relative

L'attributo 'position:relative' posiziona un elemento rispetto alla sua posizione corrente.

Nell'esempio seguente, questo elemento div viene posizionato a 10 pixel di distanza dal margine destro della sua posizione normale.

div
{
position:relative;
left:10;
}

position:absolute

L'attributo 'position:absolute' posiziona un elemento in base al margine della finestra.

Nell'esempio seguente, questo elemento div viene posizionato a 10 pixel di distanza dal margine destro del blocco contenitore.

div
{
position:absolute;
left:10;
}

Visibilità

L'attributo 'visibility' determina se un elemento è visibile o meno.

visibility:visible

L'attributo 'visibility: visible' rende l'elemento visibile.

h1
{
visibility:visible;
}

visibility:hidden

L'attributo 'visibility: hidden' rende l'elemento invisibile.

h1
{
visibility:hidden;
}

Z-index

L'attributo 'z-index' viene utilizzato per posizionare un elemento dopo un altro. Il valore predefinito di 'z-index' è 0. Più alto è il valore, maggiore è la priorità. 'z-index: -1' ha una priorità più bassa.

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

Nell'esempio sopra, se h1 e h2 si sovrappongono, l'elemento h2 sarà sopra h1.

Filtri

L'attributo 'filter' ti permette di aggiungere più effetti di stile ai testi e alle immagini.

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

nota:Per utilizzare l'attributo filter, specificare sempre la larghezza dell'elemento.

gli esempi sopra riportati producono l'output seguente:

Intestazione

diversi filtri

nota:a meno che l'attributo background-color non sia impostato su transparent, alcune proprietà di Filter non funzioneranno!

proprietà parametro descrizione esempio
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 permite di impostare l'opacità dell'elemento 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 sfocatura dell'elemento 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color rendi trasparente il colore specificato 
filter:chroma(
color=#ff0000)
fliph none inversione orizzontale dell'elemento filter:fliph;
flipv none inversione verticale dell'elemento filter:flipv;
glow
  • color
  • strength
 fai brillare l'elemento 
filter:glow(
color=#ff0000,
strength=5);
gray none mostra gli elementi in bianco e nero filter:gray;
invert none mostra gli elementi con valori di colore e luminosità invertiti filter:invert;
mask color mostra elementi con sfondo specificato e colore di primo piano trasparente 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 mostra elementi con ombra 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 mostra elementi con ombra 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 mostra gli elementi in forma ondulatoria 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Visualizzare elementi con valori di contrasto e luminosità invertiti in bianco e nero. filter:xray;

Background

L'attributo background ti permette di scegliere il tuo sfondo.

background-attachment:scroll

L'immagine di sfondo scorre con la pagina.

background-attachment:fixed

L'immagine di sfondo non scorre con la pagina.

Più esempi

Visibilità
Come rendere un elemento invisibile. Vuoi che questo elemento sia visibile o no?
Z-index
Z-index può essere utilizzato per posizionare un elemento dopo un altro elemento, utilizzando l'ordine Z-index.
Z-index
Guardate, l'ordine Z-index dell'elemento è cambiato.
Cursors
Cambiare lo stile del cursore tramite CSS.
Filtri
Usare l'attributo filter per cambiare lo stile del titolo.
Filtri sulle immagini
L'attributo filter può anche essere applicato alle immagini, ecco alcuni esempi di immagini che hanno già applicato l'attributo filter.
Watermark
L'immagine di sfondo non si muove quando la pagina scorre.