0

I'm trying to get a DIV containing an image to appear above a DIV containing text, I can't understand why it will only appear below it.

<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>

This is what I get:

enter image description here

I think the problem is because I'm using position: relative; to position the two gray bars in the right place, but if that is the problem then how do I get the result I'm after without using position: relative;?

Sumner Evans
  • 8,951
  • 5
  • 30
  • 47
Andy Groom
  • 619
  • 1
  • 7
  • 15

2 Answers2

3

Add position relative to the div with the image for you z-index to work

<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>
Aaron
  • 10,187
  • 3
  • 23
  • 39
2

z-index has no effect for position:static (the default). Just add position relative to the image container.

jul
  • 1,054
  • 2
  • 11
  • 24