2

500x250のテキストボックスと画像しかない白いページがあります。ページは流動的です。

画面の左下に画像を固定しながら、テキストボックスをページの中央に配置しようとしています。私は次のcssでこれを部​​分的に達成します：

.bottom-right { /* used to fix the image to the bottom of the screen */
    bottom: 0;
    right: 0;
    position: fixed;
}

#content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50%;
    width: 500px;
    height: 250px;
    position: relative;
}

ウィンドウのサイズを垂直方向に変更すると、画像がテキストボックスを覆います。代わりに、テキストを上げてほしい。

4

2 に答える 2

1

あなたの質問を正しく理解した場合は、右下隅に固定されている画像の上に常に「テキストボックス」を配置する必要があります。

この実用的なフィドルの例を参照してください！

CSS

#content {
    width: 500px;
    height: 250px;
    position: absolute;          /* this is the key */
    z-index: 1;                  /* this is the key */
    left: 50%;
    top: 50%;
    margin: -125px 0 0 -250px;
}

  • CSSposition:absolute;

    これは、要素を#content通常のドキュメントフローの外側に配置することで、他の要素の影響を受けたり、後の兄弟のレイアウトに影響を与えたりしないようにします。

  • CSSz-index:1;

    これは、要素をドキュメントスタック上で上に移動し、低い値（デフォルトのスタックレベルは0）を持つ他の要素の上に配置することです。

詳細については、CSSの絶対位置と固定位置-W3CWikiを参照してください。

于 2012-06-16T22:49:29.607 に答える
0

私が考えることができる2つのオプション：

  1. CSSメディアクエリを使用し、ビューポートが特定の高さよりも小さい場合は、テキストボックスの高さまたは位置を変更して、画像がそれを覆わないようにします。
  2. min-height親の周りに設定しdiv、特定の高さより低くなったら、垂直スクロールバーを表示します。
于 2012-06-16T22:47:30.343 に答える