Posicionamiento CSS (CSS-P) de DHTML

CSS se utiliza para agregar estilos a los elementos HTML.

Ejemplo

comentarios:La mayoría de los ejemplos de DHTML necesitan IE 4.0+, Netscape 7+ o Opera 7+!

position:relative
¿Cómo posicionar este elemento en relación con su posición normal?
position:relative
¿Cómo posicionar todos los títulos en relación con su posición normal?
position:absolute
¿Cómo definir un elemento utilizando un valor absoluto?

Puedes encontrar más ejemplos en la parte inferior de la página.

¿Qué propiedades se pueden usar junto con CSS-P?

Primero, este elemento debe especificar la propiedad 'position' (relative o absolute).

Luego, puedo configurar las siguientes propiedades CSS-P:

  • left - Posición izquierda del elemento
  • top - Posición superior del elemento
  • visibility - Especificar si un elemento debe ser visible o oculto
  • z-index - Orden de apilamiento de elementos
  • clip - Recorte de elementos
  • overflow - ¿Cómo manejar el contenido que se desborda?

Position

La propiedad 'position' de CSS le permite controlar la posición de un elemento en el documento.

position:relative

La propiedad 'position:relative' permite posicionar este elemento en función de la posición actual del elemento.

El siguiente ejemplo coloca este elemento div en una posición 10 píxeles a la derecha de su posición normal.

div
{
position:relative;
left:10;
}

position:absolute

La propiedad 'position:absolute' coloca un elemento en función del margen de la ventana.

El siguiente ejemplo coloca este elemento div en una posición 10 píxeles a la derecha del margen derecho de su contenedor.

div
{
position:absolute;
left:10;
}

Visibilidad

La propiedad 'visibility' determina si un elemento es visible o no.

visibility:visible

La propiedad 'visibility: visible' permite que el elemento sea visible.

h1
{
visibility:visible;
}

visibility:hidden

La propiedad 'visibility: hidden' permite que el elemento sea invisible.

h1
{
visibility:hidden;
}

Z-index

La propiedad 'z-index' se utiliza para colocar un elemento después de otro. El valor predeterminado de 'z-index' es 0. Cuanto mayor sea el valor, mayor será la prioridad. 'z-index: -1' tiene una prioridad más baja.

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

En el ejemplo anterior, si h1 y h2 se superponen, el elemento h2 se colocará encima de h1.

Filtros

La propiedad 'filter' le permite agregar más efectos de estilo a los textos e imágenes.

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

comentarios:si es necesario usar la propiedad filter, siempre debe especificar el ancho del elemento.

los ejemplos anteriores producen la siguiente salida:

encabezado

diferentes filtros

comentarios:¡Algunas propiedades de Filter no funcionarán a menos que la propiedad background-color esté configurada como transparent!

propiedades parámetros descripción ejemplo
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 permite ajustar la opacidad del elemento 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 hacer borroso el elemento 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color hacer transparente el color especificado 
filter:chroma(
color=#ff0000)
fliph none inverter verticalmente el elemento filter:fliph;
flipv none inverter horizontalmente el elemento filter:flipv;
glow
  • color
  • strength
 hacer que el elemento brille 
filter:glow(
color=#ff0000,
strength=5);
gray none presentar elementos en blanco y negro filter:gray;
invert none presentar elementos con valores de color y brillo invertidos filter:invert;
mask color presentar elementos con color de fondo especificado y color de primer plano transparente 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 presentar elementos con sombra 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 presentar elementos con sombra 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 presentar elementos en forma de onda 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Muestre elementos con valores de contraste y brillo en blanco y negro. filter:xray;

Fondo

La propiedad background le permite elegir su propio fondo.

background-attachment:scroll

El fondo se desplaza con la página.

background-attachment:fixed

El fondo no se desplaza con la página.

Más ejemplos

Visibilidad
Cómo hacer que un elemento sea invisible. ¿Desea que este elemento se muestre o no?
Z-index
Z-index se puede usar para colocar un elemento detrás de otro elemento, utilizando el orden Z-index.
Z-index
Miren, el orden Z-index del elemento ha cambiado.
Cursor
Cambie el estilo del cursor usando CSS.
Filtros
Cambie el estilo del título usando la propiedad filter.
Filtros en imágenes
La propiedad filter también se puede aplicar a las imágenes, aquí hay algunos ejemplos de imágenes que ya han aplicado la propiedad filter.
Agua marcada
Las imágenes de fondo no se mueven cuando se desplaza la página.