Posición, Generador de estilos (Cuadro de diálogo)

Artículo
10/07/2008

Actualización: noviembre 2007

La página Posición del cuadro de diálogo Generador de estilos permite definir atributos de posición CSS (hoja de estilos en cascada). Puede aplicar estos atributos directamente a elementos HTML o agregarlos a reglas de estilo CSS.

Para aplicar los atributos de posición directamente a los elementos HTML de la página

Abra el documento HTML en la vista Diseño del diseñador HTML y seleccione el elemento al que desee aplicar formato.
Haga clic en Estilo en el menú Formato para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Posición en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Posición, Generador de estilos.

Cuando aplique estilos a elementos seleccionados en la vista Diseño, los atributos de estilo CSS se insertarán en línea en el código de marcado HTML de los elementos seleccionados. Cambie a la vista HTML para revisar los nuevos atributos de estilo insertados.

Para agregar atributos de posición a una regla de estilo CSS definida en una hoja de estilos externa

Abra una hoja de estilos externa existente y sitúe el punto de inserción entre las llaves ({ }) situadas detrás del selector correspondiente a la regla de estilo deseada.
Haga clic en Generar estilo en el menú Estilos para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Posición en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Posición, Generador de estilos.

Nota:
El menú Estilos aparecerá cuando abra una hoja de estilos CSS externa para editarla. La opción Generar estilo del menú Estilos estará disponible cuando coloque el punto de inserción entre las llaves situadas detrás del selector de una regla de estilo.

Se puede aplicar una clase de estilo CSS definida en una hoja de estilos externa a un elemento del elemento <BODY> de una página Web mediante la asignación del selector de estilo CSS como propiedad CLASS del elemento.

Las opciones disponibles en la página Posición del cuadro de diálogo Generador de estilos son:

Tareas

Elementos de interfaz de usuario

Modo de posición

Establece el modo que determina los campos de posición que estarán disponibles. Seleccione una de las siguientes opciones de la lista desplegable.

<Sin establecer>
Si el atributo es <Sin establecer>, no se agregará código al estilo.
Posición en flujo normal
No cambia la posición del elemento; se puede especificar el alto y el ancho. Si elige Posición en flujo normal, se insertará el siguiente código de marcado CSS:

POSITION:static

Nota:

La zona de vista previa contigua al selector Modo de posición se actualiza de forma que refleje las selecciones de modo.
Desplazamiento desde flujo normal
Permite especificar las posiciones superior e izquierda de un elemento con respecto a su posición en el flujo normal; se puede especificar el alto y el ancho. El flujo normal de un elemento es su posición antes de aplicar el estilo. Si elige Desplazamiento desde flujo normal, se insertará el siguiente código de marcado CSS:

POSITION:relative
Posición absoluta
Permite especificar la posición superior absoluta, la posición izquierda absoluta, el índice Z, el alto y el ancho de un elemento. Normalmente, se colocan en posiciones absolutas los elementos que se desean fijar en una posición específica. Por ejemplo, podría colocar un logotipo en una posición absoluta de forma que no se moviese al agregar o editar otros elementos. Si elige Posición absoluta, se insertará el siguiente código de marcado CSS:

POSITION:absolute

Nota:
La zona de vista previa contigua al selector Modo de posición se actualiza de forma que refleje las selecciones de modo.

Si selecciona un modo de posición, estarán disponibles las siguientes opciones.

Superior
Establece la posición superior de un elemento, como valor absoluto o como valor relativo, a su posición en el flujo normal. Especifique un valor y elija una opción de unidad (px, pt, pc, mm, cm, in, em, ex o %). La opción de unidad predeterminada es px. Por ejemplo, si escribe 5 y después acepta la opción de unidad predeterminada, se insertará el siguiente código de marcado CSS:

TOP:5px

Nota:

Esta opción estará disponible cuando se elija Desplazamiento desde flujo normal en la lista Modo de posición.
Izquierda
Establece la posición izquierda de un elemento, como valor absoluto o como valor relativo a su posición en el flujo normal. Especifique un valor y elija una opción de unidad (px, pt, pc, mm, cm, in, em, ex o %). La opción de unidad predeterminada es px. Por ejemplo, si escribe 5 y después acepta la opción de unidad predeterminada, se insertará el siguiente código de marcado CSS:

LEFT:5px

Nota:

Esta opción estará disponible cuando se seleccioneDesplazamiento desde flujo normal en la lista Modo de posición.
Alto
Establece el alto de un elemento. Especifique un valor y elija una opción de unidad (px, pt, pc, mm, cm, in, em, ex o %). La opción de unidad predeterminada es px. Por ejemplo, si escribe 5 y después acepta la opción de unidad predeterminada, se insertará el siguiente código de marcado CSS:

HEIGHT:5px
Ancho
Establece el ancho de un elemento. Especifique un valor y elija una opción de unidad (px, pt, pc, mm, cm, in, em, ex o %). La opción de unidad predeterminada es px. Por ejemplo, si escribe 5 y después acepta la opción de unidad predeterminada, se insertará el siguiente código de marcado CSS:

WIDTH:5px

Nota:
Esta opción estará disponible cuando se elija Desplazamiento desde flujo normal en la lista Modo de posición.

Nota:
Esta opción estará disponible cuando se seleccioneDesplazamiento desde flujo normal en la lista Modo de posición.

Índice Z
Establece el orden z de un elemento. El orden z controla la presentación de los elementos solapados; los elementos con valores de orden z elevados se muestran por delante de los elementos con valores de orden z bajos. Si desea mover un elemento hacia arriba en el orden z, escriba un número positivo para que se genere un resultado como el del siguiente ejemplo:

Z-INDEX:99

Nota:
Para mover un elemento hacia abajo en el orden z, escriba un número menor o un número negativo.

Nota:
El valor de Índice Z y la posición están relacionados. Si escribe valores de posición que hacen que se solapen elementos, puede asignar valores apropiados de Índice Z para controlar qué elemento se muestra en primer lugar. Asigne el mayor valor de Índice Z al elemento que desee que aparezca sobre el otro elemento.