posicionar - Posiciona un elemento HTML relativo a su contenedor usando CSS

posicionar div css

Question

Intento crear un gráfico horizontal de 100% de barras apiladas utilizando HTML y CSS. Me gustaría crear las barras usando DIVs con colores de fondo y anchos de porcentaje dependiendo de los valores que quiero graficar. También quiero tener una cuadrícula para marcar una posición arbitraria a lo largo del gráfico.

En mi experimentación, ya obtuve las barras para apilar horizontalmente asignando la propiedad de CSS float: left . Sin embargo, me gustaría evitar eso, ya que realmente parece interferir con el diseño de maneras confusas. Además, las líneas de la cuadrícula no parecen funcionar muy bien cuando las barras flotan.

Creo que el posicionamiento de CSS debería ser capaz de manejar esto, pero todavía no sé cómo hacerlo. Quiero poder especificar la posición de varios elementos relativos a la esquina superior izquierda de su contenedor. Me encuentro con este tipo de problema regularmente (incluso fuera de este proyecto gráfico en particular), así que me gustaría un método que sea:

1. Cross-browser (idealmente sin demasiados hacks de navegador)
2. Se ejecuta en modo Quirks
3. Tan claro / limpio como sea posible, para facilitar las personalizaciones
4. Hecho sin JavaScript si es posible.

Answer 1

Debe establecer explícitamente la posición del contenedor principal junto con la posición del contenedor secundario. La forma típica de hacer eso es algo como esto:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Answer 2

El posicionamiento absoluto coloca un elemento relativo a su antecesor posicionado más cercano. Así que coloque la position: relative en el contenedor, luego para los elementos secundarios, top y a la left estarán relacionados con la parte superior izquierda del contenedor siempre que los elementos secundarios tengan la position: absolute . Hay más información disponible en la especificación CSS 2.1 .

Answer 3

Sé que llego tarde, pero espero que esto ayude.

Los siguientes son los valores para la propiedad de posición.

• estático
• fijo
• relativo
• absoluto

posición: estático

Esto es predeterminado. Significa que el elemento ocurrirá en una posición que normalmente lo haría.

#myelem {
    position : static;
}

posición: fija

Esto establecerá la posición de un elemento con respecto a la ventana del navegador (ventana gráfica). Un elemento posicionado fijo permanecerá en su posición incluso cuando la página se desplaza.

(Ideal si desea el botón de desplazamiento hacia arriba en la esquina inferior derecha de la página).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

posición: relativa

Para colocar un elemento en una nueva ubicación relativa a su posición original.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

El CSS anterior moverá el elemento #myelem 30px hacia la izquierda y 30px desde la parte superior de su ubicación real.

posición: absoluta

Si queremos que un elemento se coloque en una posición exacta en la página.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

El CSS anterior colocará el elemento #myelem en una posición 30px desde arriba y 300px desde la izquierda en la página y se desplazará con la página.

Y finalmente...

posición relativa + absoluta

Podemos establecer la propiedad de posición de un elemento padre en relativa y luego establecer la propiedad de posición del elemento hijo en absoluta . De esta forma, podemos ubicar al niño en relación con el padre en una posición absoluta.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Podemos ver en la imagen de arriba que el elemento # div-2 está ubicado en la esquina superior derecha dentro del elemento #container .

GitHub: here puedes encontrar el HTML de la imagen de arriba y el de CSS.

Espero que este tutorial ayude.

Answer 4

Tiene razón en que el posicionamiento CSS es el camino a seguir. Aquí hay un resumen rápido:

position: relative distribuirá un elemento relativo a sí mismo. En otras palabras, los elementos se disponen en un flujo normal, luego se elimina del flujo normal y se compensa con los valores que haya especificado (arriba, derecha, abajo, izquierda). Es importante tener en cuenta que, debido a que se elimina del flujo, otros elementos a su alrededor no se moverán con él (en su lugar, use márgenes negativos si desea este comportamiento).

Sin embargo, lo más probable es que le interese la position: absolute que colocará un elemento relativo a un contenedor. Por defecto, el contenedor es la ventana del navegador, pero si un elemento padre tiene una position: relative o position: absolute set en él, entonces actuará como el padre para las coordenadas de posicionamiento de sus hijos.

Demostrar:

<div id="container">
   <div id="box"> </div>
</div>

#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

En ese ejemplo, la esquina superior izquierda de #box sería #box abajo y 50px a la izquierda de la esquina superior izquierda de #container . Si #container no tenía position: relative conjunto position: relative , las coordenadas de #box estarían relacionadas con la esquina superior izquierda del puerto de visualización del navegador.

Espero que ayude.