css - posicionar - Cómo conseguir div superpuestos con posiciones relativas

posicionar div abajo

Question

Quiero que algunos div se coloquen en una línea al lado de cada uno pero también les permita superponerse al div anterior.

Lo que estoy tratando de obtener es una línea de tiempo, con divs para eventos de cierta longitud. Los eventos pueden superponerse entre sí.

Mi idea era darle a cada div la misma posición superior, un índice z creciente y una posición izquierda creciente (según el momento del evento). Más adelante, separaría los divs individuales con los eventos del mouse para visualizar la superposición.

Lo que obtengo es que cada div se coloca debajo del siguiente. Con el violín del atributo superior, puedo hacer que se alineen horizontalmente. Pero no veo el patrón.

 <div class="day">
         <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
         <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
         <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
 </div> 

Si utilizo posiciones absolutas, los elementos salen volando del div circundante y están posicionados absolutamente en algún lugar de la página.

Answer 1

¡Usa márgenes negativos!

.day {position: relative; width: 500px; height: 500px;}

Fiddle: http://jsfiddle.net/vZv5k/

Otra solución:

Proporcione a la clase .day un width , height y position relative , manteniendo la div interna en position absolute ed.

Echa un vistazo a la siguiente CSS :

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3;"> </div>
</div>

Y el HTML :

<div id="container" style="position: relative;width:200px;height:100px;top:100px;background:yellow">
    <div id="innerdiv1" style="z-index: 1; position:absolute; width: 100px;height:20px;background:red;">a</div>
    <div id="innerdiv2" style="z-index: 2; position:absolute; width: 100px;height:20px;background:blue;left:10px;top:10px;"></div>
</div>

Answer 2

Con el atributo top , también puede mover objetos relativamente posicionados. En mi ejemplo de código, el cuadro rojo se superpone al cuadro verde debido a su z-index . Si elimina el z-index , el cuadro verde está en la parte superior.

HTML:

<div class="wrapper">
  <div class="box one"></div>
  <div class="box two"></div>
</div>

CSS:

.wrapper {
  width: 50px;
  height: 50px;
  overflow: hidden;
}

 .box {
  width: 100%;
  height: 100%;
  position: relative;
}

 .box.one {
  background-color: red; 
  z-index: 2;
  top: 0px;
}

 .box.two {
  background-color: green; 
  z-index: 1;
  top: -50px;
}

Answer 3

Encontré la solución. Probablemente sea cegadoramente obvio para cualquiera que sepa css.

Pensé que no podía usar la posición absoluta porque mis elementos saldrían volando de la división circundante.

Resulta que, entendí mal el posicionamiento absoluto. No es lo mismo que arreglado, pero a mi me pareció así.

developer.mozilla.org/en-US/docs/CSS/position explica bien.

Posicionamiento absoluto posiciona absolutamente al siguiente ancla circundante. El valor predeterminado es la página completa, si no se define ningún otro anclaje. Para hacer algo un ancla debe ser posición: relativa;

Solucion rapida

añadir posición: relativo; A la clase diurna y utilizando posicionamiento absoluto en el div interior.

Answer 4

sencillo ,
div interior usando posicionamiento absoluto pero envuelto con div que usa posición relativa .

<div class="day">
    <div style="top: 35px;left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative; margin-top: -15px;"> </div>
    <div style="top: 35px;left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative; margin-top: -15px;"> </div>
</div>

puede utilizar otro método como el margen negativo, pero no se recomienda si desea un cambio dinámico de HTML, por ejemplo, si desea mover la posición del div. interno superpuesto, simplemente configure css arriba / izquierda / derecha / abajo del contenedor o modifíquelo usando javascript (jquery u otro).

mantendrá su código limpio ...