CSS - Espacio Sobrante por el posicion Relative

   
Vista:

Espacio Sobrante por el posicion Relative

Publicado por José Maria (2 intervenciones) el 01/04/2017 13:10:59
Screenshot_1

Buenas gente,
Tengo una duda a ver si alguien me ayuda a resolverla.

Tengo un HTML con dos cajas:

1
2
3
4
<body>
	<div class="caja1"></div>
	<div class="caja2"></div>
</body>

Luego en el Css, la segunda caja le pongo un posicionamiento relativo y me la llevo arriba, dejando debajo el espacio de esa caja como podeis ver en la imagen.

1
2
3
4
5
6
7
8
9
10
11
.caja2{
 
border-style: solid;
width: 500px;
height: 500px;
background: red;
position: relative;
top: -500px;
left: 800px;
 
}

Hay alguna propiedad que me permita quitar ese espacio feo?

Evidentemente esta la opción de meter las dos cajas en un solo div y así ajustarlo pero por si había alguna propiedad que directamente quitara ese espacio, no soy muy fan de tener muchos div en la web.
Gracias!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro

Espacio Sobrante por el posicion Relative

Publicado por Alejandro (19 intervenciones) el 01/04/2017 23:29:32
Hola, el espacio que deja la caja 2 se debe al posicionamiento relativo ya que este no rompe el flujo del html. para hacer lo que tu quieres puedes usar position absolute.
Prueba con esto:

1
2
3
4
5
6
7
8
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 500px;
background: red;
border-style: solid;
}

Acuerdate de resetear los margenes y paddings iniciales al inicio de tu hoja de estilos:

1
2
3
4
5
6
7
8
9
10
11
12
13
html {
box-sizing: border-box;
font-size: 16px;
}
 
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
font-size: 1rem;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Espacio Sobrante por el posicion Relative

Publicado por José Maria (2 intervenciones) el 04/04/2017 12:53:17
Era exactamente eso, ponele el absolute a la segunda caja.

Muchas gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad