0

画像を重ねるために作成したcssとhtmlコードがありますが、クライアントから苦情を受けるまでは完全に機能していました.ブラウザを縮小すると、重なっているテキストが移動します。私のコードに問題は見られず、研究は無駄であることが証明されています。彼はそれをできるだけ早く直してほしいと言ったので、仲間のオーバーフローに助けを求めます!
CSS

      p.contactInfo {
        position: absolute;
        top: 20px;
        right: 475px;
        width: 100%;
        z-index: 10;
    }
    p.contactInfo span {
        color: #D7D7D7;
        font-size:13px;
        letter-spacing: -1px;
        padding: 10px;
        float:right;
    }

HTML

                    <p class="contactInfo"><span>*******
                                                </span></p>

デモ http://jsfiddle.net/baGjv/

4

2 に答える 2

1

スペンサーが述べたように、問題はright: 475pxポジショニングとして使用していることです。クライアントがブラウザのサイズを -narrower- than に変更すると475px、アイテムは実際にはページの左端から消えます。これは、「475px右から」の位置がブラウザの表示領域内になくなるためです。

私の推測では、誰かがページを開くのに使用できる最小のブラウザーでも、ページは常に少なくとも600px幅が広いと想定していると思います。この場合、これを修正する方法の 1 つは、bodyタグを次のように設定することです。の（または最小幅が何であれ）がありますmin-width。600pxこれにより、ウィンドウが狭くなりすぎたときにブラウザーにスクロールバーが作成されますが、視認性が失われることはありません。

ただし、問題を解決するためのおそらくより良い方法は、この方法で絶対配置を使用しないことです。絶対配置は、一般に、相対的に配置された要素を基準にして使用するのが最適です。私が言及していることの明確な説明については、この記事を参照してください。

于 2012-10-29T18:58:52.423 に答える
1

20px などのセット数を使うと画面上で 20px になる、画面のサイズが違うのでこのように違う… この「$」が左から 20px の位置にある要素だと想像してください。（私はあなたのテンプレートが中央にあると想像して左を使用していますが、この時点で完全に確信することはできません）

large monitor
-----------------
  $


-----------------

small monitor
----------
  $


----------

左から同じになりますが、％値をいじると、完全に異なり、各モニターに広がります。「$」は 20% です。これは、ページの残りの部分が (ほとんどの場合と同様に) 静的である場合に役立ち、ページの残りの部分と整列したままになります。私はleft:20%;あなたが必要とする正確な％であると言っているわけではありません.あなたはそれを変更する必要があります.

large monitor
-----------------
    $


-----------------

small monitor
----------
  $


----------
于 2012-10-29T18:46:28.900 に答える