Position: relative con porcentajes

mariadicar · #1 (**permalink**) 18/08/2015, 10:50

Quisiera saber porque cuando pongo position relative a una imagen que esta dentro del body y trato de moverla con top en porcentaje no funciona, he notado que es porque al mismo nivel del img hay un p, cuando quito el p si funciona, pero no sè porque ocurre esto. Gracias

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position</title>
<link rel="stylesheet" href="position.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda sunt vel, saepe odit molestiae quibusdam dolorum hic asperiores officia ipsum, voluptatum! Numquam voluptatum aliquid aut hic obcaecati iure doloremque expedita.</p>
<img src="http://lorempixel.com/350/230/" alt="">
</body>
</html>

---------------------------------------------------------------------------------------

html, body{
height: 100%;
}

img{
position: relative;
top: 40%;
}

JustinKO · #2 (**permalink**) 18/08/2015, 13:05

Hola y bienvenida al foro.

La verdad que no sé para qué quieres hacer eso. No le veo mucho sentido hacerlo así.

Pero bueno, para que te funcione, mételo dentro de un div y te funcionará. Pero sigo pensando que te estás liando porque no le veo mucho el sentido a lo que quieres hacer.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position</title>
<link rel="stylesheet" href="position.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda sunt vel, saepe odit molestiae quibusdam dolorum hic asperiores officia ipsum, voluptatum! Numquam voluptatum aliquid aut hic obcaecati iure doloremque expedita.</p>
<div class="imagen"><img src="http://lorempixel.com/350/230/" alt="">
  </div>
</body>
</html>

Código CSS:

Ver originalhtml, body{
height: 100%;
}
 
.imagen{
position: relative;
top: 40%;
}