html - Top in position relative 没有按预期工作

Question

为什么 <img> 的顶级属性不起作用, 当标签 <img>与<p> 同级, 但如果我删除标签 <p> , 这行得通。

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/

使用容器 div 设置为 position: relative; 然后添加 position: absolute; 到 img。