在一个容器中的图片和文字排版时出现的层次问题?

Question

css:
  div{ width: 图片宽度;}
  p  { background-color: #999;   color: #fff;}
  div:hover p{ margin-top: -500px}
html:
<div>  <img src="图片"> <p>很多文字很多文字很多文字很多文字</p>  </div>

问题描述:

我需要在鼠标放上去的时候文字浮上来, 因为文字在图片后面, 所以文字margin负值上去时候图片不会遮挡文字, 但是文字的背景却没有显示, 请问这是为什么? 我知道解决方案, 只是想知道原因,谢谢(gif为了便于观察使用了transition,不影响问题)

Answer 1

z-index的问题