how to `absolute` position an image over another image? I want to position an image over to appear over another image at a fix position, even if that other image changes its location due to resizing of the browser window. My URL: http://spabc.com/drupal/ and I want to have the orange arrow over the "Offers &amp; Packages" tile on fix position, on the top left corner. How can I achieve this?
Well, there's a couple of things going on, and I don't want to approach re-designing how you've implemented your DOM for this page. Looking at your HTML in question:

&lt;a href="/drupal/content/offers-packages"&gt;
  &lt;img alt="" src="/ckfinder/userfiles/images/special_arrow.png" style="height:80px; left:130px; position:absolute; top:10px; width:80px"&gt;
  &lt;img alt="Offers &amp;amp; Packages" class="featuredimg" src="/ckfinder/userfiles/images/Offers%26Packages.png"&gt;
&lt;/a&gt;


which renders this:



You've wrapped your two inline IMG elements within an inline A element. Inline
elements are not meant to moved around in block-like fashion. One approach is
to redefine your anchors here as blocks. We'll also need to define a height
and width for the parent element, as the redefining of imgs to blocks,
absolutely positioned, will remove the parent elments ability to calculate
height and width. Position: absolute removes the object from the page's flow.
(I presume height 200px and width of 220px is accurate, if not, correct to
taste.) 

Here's the key aspect: the parent DOM item must be "position: relative" which
you must explicitly declare. THEN the child elements may be positioned
absolutely, within where ever the parent element falls on the page.  The parent
div will move as it needs to on the page, moving the absolutely positioned
child imgs within it.  Otherwise, your css will traverse the DOM backwards to the
first position:relative element. Not finding one, it uses the HTML element for
positioning. The other thing to consider is that img is an inline element, not
a block element. So you must redefine it as a block.  Finally, notice the
z-index forcing the graphic callout to overlay the featured graphic.

This refactored code shows what you're looking for:

&lt;a style="display: block; position: relative; height: 200px; width: 200px;" href="/drupal/content/offers-packages"&gt;
  &lt;img style="display: block; position: absolute; top: 0; left: 0; z-index: 1;" alt="" src="/ckfinder/userfiles/images/special_arrow.png" style="height:80px; left:130px; position:absolute; top:10px; width:80px"&gt;
  &lt;img style="display: block; position: absolute; top: 0; left: 0;" alt="Offers &amp;amp; Packages" class="featuredimg" src="/ckfinder/userfiles/images/Offers%26Packages.png"&gt;
&lt;/a&gt;


Which renders this:



Of course I wouldn't do this with in-line styles, I'm just being lazy to get my thoughts up quickly. Finally, I wouldn't use a table for that display element, I'd use an unordered list. But that's for a different discussion.