2 Distributed Divisions?


I have a container div that has relative positioning, then another div inside that also has relative positioning:

<div class="first">
  <div class="second">
    <img src="img.jpg" />

I would like an image with absolute positioning to be relative to the "second" div not the "first". But I need them both to have relative positioning, how do I specify so the image is relative to the "second" div?

In the page hierarchy the image would be relative to .second; however, you must define the parent to be relatively positioned for the child to care.

see: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

.second { position:relative; }
.second img { position:absolute; top:0; left: 0 }