Foros del Web » Creando para Internet » CSS »

posicion de elementos

Estas en el tema de posicion de elementos en el foro de CSS en Foros del Web. Hola, tengo un problemita deseo apilar elementos uno arriba de otro tengo este código: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < html >     ...
  #1 (permalink)  
Antiguo 26/06/2016, 11:15
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
posicion de elementos

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

Código HTML:
Ver original
  1.     <head>
  2.         <style>
  3.         *{
  4.         padding:0px;
  5.         margin:0px;
  6.         }
  7.         .main{
  8.         border-width:1px;
  9.         border-color:#000000;
  10.         border-style:solid;
  11.         margin:50px 0px 0px 100px;
  12.         width:500px;
  13.         height:400px;
  14.         }
  15.         .elemento{
  16.         border-width:1px;
  17.         border-color:#0000ff;
  18.         border-style:solid;
  19.         position:relative;
  20.         width:100px;
  21.         height:100px;
  22.         }
  23.         </style>
  24.     </head>
  25.     <body>
  26.         <div class="main">
  27.             <div class="elemento"></div>
  28.             <div class="elemento"></div>
  29.             <div class="elemento"></div>
  30.         </div>
  31.     </body>
  32. </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
  #2 (permalink)  
Antiguo 26/06/2016, 11:52
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 13 años, 11 meses
Puntos: 468
Respuesta: posicion de elementos

Código CSS:
Ver original
  1. .main {
  2.     display: flex;
  3.     flex-direction: column;
  4. }

Te coloca los elementos que estén dentro de main en columna, es decir, uno abajo de otro.
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #3 (permalink)  
Antiguo 26/06/2016, 14:38
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: posicion de elementos

Cita:
Iniciado por rodrypaladin Ver Mensaje
Código CSS:
Ver original
  1. .main {
  2.     display: flex;
  3.     flex-direction: column;
  4. }

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
  #4 (permalink)  
Antiguo 27/06/2016, 06:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: posicion de elementos

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
  1. .main {
  2.   position: relative;
  3. }
__________________
(:
  #5 (permalink)  
Antiguo 27/06/2016, 07:12
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 13 años, 11 meses
Puntos: 468
Respuesta: posicion de elementos

Vaya, si que entendí mal, pensaba que justo lo querías a sí XD
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Etiquetas: color, elementos, html, posicion, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:17.