css - 解像度が異なると、margin align が壊れる

Question

サイトで 2 つの画像を使用しています。1 つは右上、もう 1 つは中央右です。

右上の画像のCSSコード

.fbtopbutton{ position: absolute;top: 27px;right: 192px;}

中央右の画像の CSS コード

#annoying-floater {
  z-index:10;
  position:fixed;
  top:80%; right:-45%;
  width:640px; height:480px;
  margin-left:-320px; margin-top:-240px;
opacity: 0.8; /* css standard */
    filter: alpha(opacity=60); /* internet explorer */
}

#annoying-floater:hover {

opacity: 1.0; /* css standard */
    filter: alpha(opacity=60); /* internet explorer */
}

2 つの問題があります。

1. 画面の解像度が低くなると、画像がページの中央 (コンテンツ上) に表示されます。
2. 中央右の写真では、その写真の下にマウスを置くと、写真の上にマウスを置いたように機能します。

Answer 1

これらの画像の幅と高さを CSS でパーセンテージ単位で設定します。