Posicionar un elemento HTML relativo a su contenedor usando CSS

Question

Estoy tratando de crear un gráfico horizontal de 100% de barras apiladas usando 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 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 con regularidad (incluso fuera de este proyecto gráfico en particular), así que me gustaría un método que es:

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

Answer 1

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

position: relative diseñará un elemento relativo a . 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 esté interesado en 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 position: relative o position: absolute establecido en él, entonces actuará como el padre para las coordenadas de posición de sus hijos.

Para 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 habría 100px 50px hacia abajo y hacia la izquierda de la esquina superior izquierda de #container. Si #container no tiene configurado position: relative, las coordenadas de #box estarían relacionadas con la esquina superior izquierda del puerto de vista del navegador.

Espero que ayude.

Answer 2

Tiene que 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 3

posiciones posicionamiento absoluto un elemento en relación a su antepasado posicionado más próximo. Así que ponga position: relative en el contenedor, luego para los elementos secundarios, top y left será relativo a la parte superior izquierda del contenedor siempre que los elementos secundarios tengan position: absolute. Más información está disponible en the CSS 2.1 specification.

Answer 4

Sé que llego tarde pero espero que esto ayude.

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

• estática
• fijo
• relativa
• absoluta

posición: static

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

#myelem { 
    position : static; 
} 

posición: fija

Esto fijará la posición de un elemento con respecto a la ventana del navegador (visor). 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; 
} 

position: relative

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

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

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

position: absolute

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

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

El CSS anterior posicionará elemento #myelem en una posición desde la parte superior de 30px y 300px de la izquierda en la página y que se desplazará a la página.

Y por último ...

posición relativa absoluta

Podemos establecer la propiedad de posición de un elemento padre a relativa a continuación, establezca la propiedad posición del elemento secundario a 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 por encima de los # DIV-2 elemento se coloca en la esquina superior derecha en el interior del elemento de#container.

GitHub: Puede encontrar el código HTML de la imagen de arriba here y CSS here.

Espero que esto tutorial ayuda.