Top in position relative is not working as expected

Question

Why doesn't work top attribute for <img> , when the tag <img> is sibling to <p>, but if I delete tag <p>, this works.

html,
body {
  height: 100%;
}

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

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus delectus accusantium nulla eveniet aperiam, quo odit qui voluptas. Illo vel sed ex dolores illum eum architecto a libero atque. Voluptatibus.</p>
<img src="http://lorempixel.com/400/200/" alt="">

Answer 1

http://jsfiddle.net/9bxwxfe2/

Use a container div set to position: relative; and then add position: absolute; to the img.

Answer 2

CSS:

html,body{
        height: 100%;
}

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

Use float:left; in the img class. This will solve the problem and image will be displayed in expected position(40% from the top of the screen).