Positioning Elements in Design View

 

Publicada: abril de 2016

Cuando crea páginas HTML o ASP.NET Web Pages en el diseñador de HTML, los elementos se colocan físicamente desde la parte superior a la inferior.  De forma predeterminada, cuando la página se representa en el explorador, los elementos se representan en el mismo orden de arriba a abajo.  A veces, esto se denomina diseño de flujo.  

Asimismo, puede diseñar elementos bidimensionalmente, colocándolos mediante coordenadas horizontales y verticales en cualquier parte de la página.  Esta opción de diseño aprovecha las opciones de posición disponibles mediante estilos.  

En la Vista de diseño, puede arrastrar los elementos para colocarlos en la página, y puede seleccionar los elementos y aplicarles opciones de posición.  En la Vista de diseño, la página muestra los elementos en la ubicación en la que usted los coloca.  Puede arrastrar los elementos por el controlador para cambiar su posición.  En la vista Código fuente, puede establecer opciones de posición en el marcado para elementos individuales.  

Cuando se representa la página, el explorador muestra los elementos mediante la información de posición que especifique.

Diseño de flujo

Si los elementos no tienen ninguna propiedad de estilo de posición, flotan desde la parte superior de la página a la inferior, y de izquierda a derecha o de derecha a izquierda, en función de la configuración del atributo dir de la página o del elemento contenedor del elemento o de la configuración de idioma para el explorador.  Todos los exploradores web pueden mostrar documentos HTML en los que se utiliza este diseño.  A veces, cuando se ajusta el tamaño de la página, los elementos se vuelven a colocar.  

Si utiliza el diseño de flujo para la página, puede alinear elementos dentro de un elemento table o utilizar un elemento div con propiedades de estilo de posición o de alineación de texto.  No obstante, los elementos no pueden quedar superpuestos.  Es posible que los elementos se desplacen cuando se cambia el tamaño de la página, en función de si se utilizan unidades absolutas o porcentajes para la tabla y los anchos de celda.  

Posición en dos dimensiones

Puede aplicar opciones de posición a elementos individuales, lo que permite colocar los elementos en ubicaciones precisas de la página.

También puede especificar las opciones de posición para cualquier elemento nuevo que agregue a la página.

La herramienta de desarrollo Web Microsoft Visual Web Developer permite especificar opciones de posición que corresponden a las que están definidas en la especificación de W3C para las hojas de estilos en cascada.  Las opciones de posición son válidas en cualquier explorador que implemente el estándar HTML 4.0 de W3C, incluso los que son compatibles con XHTML 1.1.  

Las opciones son las siguientes:

• absolute

  El elemento se representa en una ubicación de la página definida por cualquier combinación de las propiedades de estilo left, right, top y bottom.  La posición 0,0 se define basándose en el elemento primario del elemento actual.  El elemento primario es el primer elemento contenedor que tiene información de posición.  Por ejemplo, si el elemento actual está dentro de un elemento div con información de posición, la posición absoluta se calcula basándose en la posición del elemento div.  Si el elemento actual no tiene ningún elemento contenedor con posición, la información de posición se calcula basándose en el elemento body.  

• relative

  El elemento se representa en una ubicación de la página definida por las propiedades de estilo left y top.  Esta opción difiere de absolute en que la posición 0,0 se define con respecto a dónde se encuentra el elemento en el flujo de la página.  Un elemento con una posición relativa, y las propiedades top y left establecidas ambas en 0 aparece en el flujo de la forma habitual.  

  Nota

  Los elementos que utilizan una posición absoluta o relativa pueden aparecen en la página desordenados con respecto a su declaración en el marcado de la página, lo que puede resultar confuso.  Por ejemplo, en la vista Código fuente puede definir un botón como el primer elemento del marcado pero tras establecer su posición, el botón puede aparecer como el último elemento en la página representada o en la Vista de diseño.  

• static

  El elemento se representa utilizando el diseño de flujo; es decir, el elemento no utiliza la posición en dos dimensiones.  Puede seleccionar esta opción si desea establecer una opción de posición en un control individual que reemplace a un valor heredado de un tema u hoja de estilos.  

Visual Web Developer ofrece igualmente la opción de posición Not Set que permite quitar cualquier información de posición existente de un control individual o de controles que se puedan agregar en el futuro.

Colocar texto estático o grupos de elementos

Para que pueda crear texto estático flotante o grupos de elementos como una unidad, puede agregar una capa a la página.  Una capa es un elemento div con información de posición incluida que permite arrastrarla alrededor de la página.  Puede escribir el texto o arrastrar elementos al elemento div.  Visual Web Developer incluye un comando en el menú Formato para agregar una capa, o puede crear el elemento div y agregarle información de posición manualmente.  

Restringir las posiciones a una cuadrícula

Si utiliza una posición absoluta o relativa, y si emplea píxeles como base para la posición (es decir, las unidades para las propiedades left y top son píxeles), puede establecer una opción para capturar elementos en una cuadrícula invisible.  Esto le ayuda a alinear los elementos en la página.  Para obtener detalles, vea Regla y cuadrícula, Diseñador HTML, Opciones (Cuadro de diálogo).  

Disponer elementos por capas

Si está utilizando la posición absoluta o relativa, puede solapar los elementos y, a continuación, se representarán en el explorador como superpuestos.  Si coloca elementos mediante una tabla, no puede superponer objetos.  

Los elementos con posición absoluta o relativa pueden incluir una propiedad z-index que especifiquen el orden, desde el fondo hasta el frente, del elemento en una tercera dimensión.  Si dos elementos comparten el mismo espacio, el elemento con el valor de atributo de índice z más alto aparece adelante.  Si utiliza comandos en la Vista de diseño para establecer la posición, la propiedad z-index se establece automáticamente, a partir de 100 hasta el elemento más al fondo.  Si agrega propiedades de posición en la vista Código fuente, debe agregar manualmente la propiedad z-index.  

Vea también

NIB: How to: Position Elements in Design View
Regla y cuadrícula, Diseñador HTML, Opciones (Cuadro de diálogo)
Validación, HTML, Editor de texto, Opciones (Cuadro de diálogo)