¿Puede CSS realmente anular el orden de los elementos HTML en una página?

Question

Si tiene varios div s en una página, puede usar CSS para ajustar el tamaño, flotarlos y moverlos un poco ... pero no veo una manera de pasar el hecho de que el primer div se mostrará cerca la parte superior de la página y la última div estará cerca de la parte inferior! No puedo anular completamente el orden de los elementos ya que provienen del código fuente HTML, ¿o sí?

Me falta algo porque la gente dice "podemos cambiar el aspecto de todo el sitio web simplemente editando un archivo CSS.", Pero eso dependerá de que aún desee el div s en el mismo orden.

(P. S. estoy seguro de que nadie utiliza position:absolute en cada elemento de una página.)

Answer 1

Con Flotante, y con posición absoluta, puede utilizar magia de posicionamiento bastante buena para cambiar parte del orden de la página.

Por ejemplo, con StackOverflow, si el marcado se configuró correctamente, el título y el contenido del cuerpo principal podrían ser las dos primeras cosas en el marcado, luego la navegación/búsqueda y finalmente la barra lateral derecha. Esto se haría teniendo un contenedor de contenido con un margen superior lo suficientemente grande como para contener la navegación y un margen derecho lo suficientemente grande como para contener las barras laterales. Entonces ambos podrían estar absolutamente posicionados en su lugar. El margen de beneficio podría ser:

<h1> Stack Overflow </h1> 
<div id="content"> 
    <h2> Can Css truly blah blah? </h2> 
    ... 
</div> 
<div id="nav"> 
    <ul class="main"><li>quiestions</li> ... </ul> 
    .... 
</div> 
<div id="side"> 
    <div class="box"> 
    <h3> Sponsored By </h3> 
    <h4> Lew Zelands fish market </h4> 
    .... 
    </div> 
</div> 

Y el css como

h1 { position: absolute; top: 0; left: 0; } 
#content { margin-top: 100px; margin-right: 250px; } 
#nav { position: absolute; top: 0; left: 300px; } 
#side { position: absolute; right: 0; top: 100px; } 

Lo importante aquí es que el margen de beneficio se tiene que hacer con este tipo de posicionamiento de la magia en la mente.

Cambiando las cosas para que la barra de navegación esté a la izquierda y la barra lateral debajo del navegador sea demasiado dura.

Answer 2

No es necesario posición: absoluta de cada elemento para hacer lo que quiera.

sólo lo utilizan en algunos artículos clave y entonces usted puede colocarlos donde quiera que desee, moviendo todos los elementos contenidos en ellos, junto con el elemento raíz de la sección.

Answer 3

CSS puede tomar los elementos fuera del flujo normal y colocarlos en cualquier lugar, de la forma que desee. Pero no puede crear un nuevo flujo.

Con esto quiero decir que puede colocar el último elemento del documento html al comienzo/parte superior de la página/ventana, y puede colocar el primer elemento del documento html al final/inferior de la página/ventana. Pero cuando haces esto no puedes posicionar estos elementos uno con respecto al otro; debe saber por sí mismo hasta qué punto del final de la página será el primer elemento del documento html que se colocará correctamente. Si ese contenido es dinámico (es decir, desde una base de datos o CMS), esto puede estar lejos de ser trivial.

Answer 4

Es posible que desee ver en CSS Zen Garden de excelentes ejemplos de cómo hacer lo que quiera. Un montón de diseños de muestra a través de los enlaces a la derecha para ver las diversas formas de mover todo usando estrictamente CSS.

Answer 5

Creo que el factor más importante es colocar sus elementos HTML de una manera que tenga sentido semántico, y con suerte en su diseño CSS no tendrá que hacer mucho trabajo. Por ejemplo, el encabezado de su sitio probablemente sea el primer elemento de la página, seguido de navegación común, luego subnavegación, contenido y pie de página (lista incompleta).

probablemente alrededor de 90-95% de los diseños que usted quiere trabajar debe ser relativamente trivial para manipular el lenguaje de formato en algo así como lo que está buscando. Por otro 5-10% seguirá siendo posible, con un poco más de esfuerzo, pero la pregunta que hay que preguntarse es "¿Con qué frecuencia ¿Es posible que desee el encabezado de mi sitio ubicado en la esquina inferior derecha de la página?"

Siempre he encontrado que el diseño de un sitio no es demasiado difícil de manipular después del hecho si desea cambiar drásticamente la apariencia, al menos en comparación con una recodificación inicial.

</2c >

Answer 6

buen punto sobre la cabecera siempre ser el primero y el pie de página última! Pero es posible que desee mover mi publicidad DIV desde la parte superior, hacia la derecha.

La otra cosa que he oído hablar es poner primero el contenido DIV, por lo que Google se presta más atención (palabras clave relevantes en la parte superior de la página puntuación más alta) ... o es que un mito?Hacer eso requeriría el tipo de truco de CSS sobre el que estoy preguntando también.

Answer 7

Puede colocar cuadros individuales completamente independientes del orden de la fuente con la posición: absoluta. De modo que puede mover el encabezado al pie de la página y el pie de página a la cima usando CSS.

Sin embargo, tenga en cuenta que esto es fundamentalmente malo para la accesibilidad: debe tener el orden del contenido en la fuente más o menos en el mismo orden en que se lo presentaría al lector. La razón es que un lector de pantalla o un dispositivo similar presentarán el contenido en el orden que se define en la fuente en lugar de la orden visual definido por el CSS.

Answer 8

Hay un par de maneras de hacerlo hoy. El primero de ellos trabaja en más navegadores, pero es más limitado:

1. Utilizando los valores de visualización de CSS table-caption, table-row y table-cell permitir ordenamiento vertical de un máximo de tres elementos controlados exclusivamente con CSS.

2. Esto es mucho más reciente y solo funcionará en todos los navegadores más recientes (sí, fallará en IE9): uso de las propiedades CSS de flexbox.

Puede ver ejemplos en vivo y leer más acerca de estas técnicas en la página "this is responsive" patrones. Los dos de los que estoy hablando están en la sección titulada "Cambio de orden de origen"