レイアウトを崩さずに画像の上に文字や画像を表示させる方法

お世話になります。
現在、ベースとなる画像の上に文字や画像を重ねる記述を下記のようにしています。

<div style=”position: relative;”>
<img src=”ベースとなる画像” width=”320″ height=”140″ alt=””>
<div style=”position: absolute; top: 15px; left: 150px; width: 150px;”>
上記のベースとなる画像の上に表示する文字や画像をここに記述
</div>
</div>

これで、PC（IEとFOX）では問題なく表示ができるのですが、IPADやIPHONEなどその他の端末やプラウザで表示するとレイアウトが大幅に崩れてしまいます。
恐らく、この記述ですと、上に乗せる文字や画像の位置をPC画面に合わせて指定しているためだと思います。（上記の太字部分）
かといって表示位置はPX以外で指定する方法が分からない為、困っています。
私がやりたいことは、大手のサイトでもよく見かけます。
例えば、YAHOO JAPAN！のﾄｯﾌﾟﾍﾟｰｼﾞのヘッダー部分ですが、YAHOOのロゴを真ん中にして、左右にYAHOO BBなどの画像を指定位置に表示させています。
イメージとしてはこのような感じです。
ベースとなる画像の上の指定した位置に文字や画像を上に表示させたいのです。

どの端末でもレイアウトを崩さずに、画像の上に文字や画像を重ねる方法をお教え下さい。

出来れば、HTML、CSS、PHPで方法があればとても助かります‼

宜しくお願いいたします。