不能让DIV出现在另一个DIV之上

Question

我正在尝试将包含图像的DIV显示在包含文本的DIV上方，我无法理解为什么它只会出现在它下面。

<div>
  <div style='z-index: 99; width: 160px; height: 120px; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75); margin-top: 16px; margin-left: 10px; border: 1px solid black;'>
    <img border=0 width=160 height=120 alt='W1A 1AA' src='upload/[W1A 1AA][221b].jpg'>
  </div>
  <div style='margin-top: 20px; padding-left: 190px; background: gray; position: relative; top: -130px;'>
    <h3 style='margin: 0px; color: white;'>Viewing as read-only an existing Inspection Survey</h3>
  </div>
  <div style='padding-left: 190px; background: lightgray; position: relative; top: -130px;'>
    <h1 style='margin: 0px;'>W1A 1AA</h1>
    <h2 style='margin: 0px;'>221b Baker Street</h2>
  </div>
</div>

这就是我得到的：

我认为问题是因为我正在使用position: relative;将两个灰色条放在正确的位置，但如果这是问题，那么如何在不使用{{{I}的情况下获得结果1}}？

Answer 1

添加相对于div的位置，并使图像z-index正常工作

＆＃13;

＆＃13;

<div>
  <div style='z-index: 99; width: 160px; height: 120px; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75); margin-top: 16px; margin-left: 10px; border: 1px solid black; position: relative;'>
    <img border=0 width=160 height=120 alt='W1A 1AA' src='http://lorempixel.com/400/200'>
  </div>
  <div style='margin-top: 20px; padding-left: 190px; background: gray; position: relative; top: -130px;'>
    <h3 style='margin: 0px; color: white;'>Viewing as read-only an existing Inspection Survey</h3>
  </div>
  <div style='padding-left: 190px; background: lightgray; position: relative; top: -130px;'>
    <h1 style='margin: 0px;'>W1A 1AA</h1>
    <h2 style='margin: 0px;'>221b Baker Street</h2>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

z-index对position：static（默认值）没有影响。只需添加相对于图像容器的位置。