Posicionar un elemento relativo a su contenedor

Estoy tratando de crear un gráfico de barras horizontal 100% apilado usando HTML y CSS. Me gustaría crear las barras usando DIVscolores de fondo y anchos de porcentaje dependiendo de los valores que quiera 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 he conseguido que las barras se apilen horizontalmente asignando la propiedad CSS float: left. Sin embargo, me gustaría evitar eso, ya que realmente parece confundir el diseño de manera confusa. Además, las líneas de la cuadrícula no parecen funcionar muy bien cuando las barras flotan.

Creo que el posicionamiento CSS debería ser capaz de manejar esto, pero aún no sé cómo hacerlo. Quiero poder especificar la posición de varios elementos en relación con 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.

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

position: relativediseñará un elemento relativo a sí mismo. En otras palabras, los elementos se presentan en flujo normal, luego se eliminan del flujo normal y se compensan 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 cambiarán con él (use márgenes negativos en su lugar si desea este comportamiento).

Sin embargo, lo más probable es que le interese position: absolutecuál posicionará un elemento en relación con un contenedor. De forma predeterminada, el contenedor es la ventana del navegador, pero si un elemento padre lo tiene position: relativeo lo ha position: absoluteconfigurado, actuará como padre para posicionar las coordenadas de sus hijos.

Demostrar:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

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

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

En ese ejemplo, la esquina superior izquierda de #boxestaría 100 píxeles hacia abajo y 50 píxeles a la izquierda de la esquina superior izquierda de #container. Si #containerno se hubiera position: relativeestablecido, las coordenadas de #boxserían relativas a la esquina superior izquierda del puerto de visualización del navegador.

Debe establecer explícitamente la posición del contenedor principal junto con la posición del contenedor secundario. La forma típica de hacerlo 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;
}

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ática

Esto es por defecto. Significa que el elemento ocurrirá en una posición que normalmente ocurriría.

#myelem {
    position : static;
}

posición: fijo

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 desplace.

(Ideal si desea desplazarse hasta el botón superior 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 en relación con su posición original.

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

El CSS anterior moverá el elemento #myelem 30px a 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 de 30 px desde arriba y 300 px 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 manera podemos colocar 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á posicionado en la esquina superior derecha dentro del elemento #container .

GitHub: Puede encontrar el HTML de la imagen de arriba aquí y CSS aquí .

Espero que este tutorial te ayude.

El posicionamiento absoluto posiciona un elemento en relación con su ancestro posicionado más cercano. Así que colóquelo position: relativeen el contenedor, luego para los elementos secundarios, topy leftserá relativo a la parte superior izquierda del contenedor siempre que los elementos secundarios lo tengan position: absolute. Más información está disponible en la especificación CSS 2.1 .

Si necesita posicionar un elemento en relación con su elemento contenedor primero, debe agregarlo position: relative al elemento contenedor . El elemento hijo que desea posicionar en relación con el padre tiene que tener position: absolute . La forma en que funciona el posicionamiento absoluto es que se realiza en relación con el primer elemento padre relativamente (o absolutamente) posicionado . En caso de que no haya un padre relativamente posicionado, el elemento se posicionará con relación al elemento raíz (directamente al elemento HTML).

Entonces, si desea colocar su elemento hijo en la parte superior izquierda del contenedor principal, debe hacer esto:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Se beneficiará enormemente al leer este artículo . ¡Espero que esto ayude!