posicion de elementos

#1 (**permalink**) 26/06/2016, 11:15

Hola, tengo un problemita deseo apilar elementos uno arriba de otro tengo este código:

Código HTML:

Ver original<html>
    <head>
        <style>
        *{
        padding:0px;
        margin:0px;
        }
        .main{
        border-width:1px;
        border-color:#000000;
        border-style:solid;
        margin:50px 0px 0px 100px;
        width:500px;
        height:400px;
        }
        .elemento{
        border-width:1px;
        border-color:#0000ff;
        border-style:solid;
        position:relative;
        width:100px;
        height:100px;
        }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="elemento"></div>
            <div class="elemento"></div>
            <div class="elemento"></div>
        </div>
    </body>
</html>

los elementos se apilan hacia abajo, alguna manera de super poner los elementos

probe con absolute, pero se salen del main y se van para la pag principal

saludos

rodrypaladin · #2 (**permalink**) 26/06/2016, 11:52

Código CSS:

Ver original.main {
    display: flex;
    flex-direction: column;
}

Te coloca los elementos que estén dentro de main en columna, es decir, uno abajo de otro.

#3 (**permalink**) 26/06/2016, 14:38

Cita:

Iniciado por rodrypaladin

Código CSS:

Ver original.main {
    display: flex;
    flex-direction: column;
}

Te coloca los elementos que estén dentro de main en columna, es decir, uno abajo de otro.

parece que no entendiste o expliqué mal, lo que deseo es que los elementos se apilen como un libro, no que se muestren en fila hacia abajo como columna

pzin · #4 (**permalink**) 27/06/2016, 06:39

Tienes que usar una posición absoluta, eso está bien. Pero tienes que indicar que .main sea el marco de referencia. Esto lo haces indicándole cualquier posición no estática:

Código CSS:

Ver original.main {
  position: relative;
}

rodrypaladin · #5 (**permalink**) 27/06/2016, 07:12

Vaya, si que entendí mal, pensaba que justo lo querías a sí XD