CSSで要素の位置を変更しないように設定する方法

要素の位置を変更しないように設定する Css メソッド: 最初に HTML サンプル ファイルを作成し、次に ID スタイル「#ads」を定義し、高さと幅を設定します。最後に「position:fixed」と right と width を使用します。 Bottom to 指定した位置に要素を配置するだけです。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、thinkpad t480 コンピューター。

おすすめ: 「css ビデオ チュートリアル 」

私たちがよく遭遇する要求は、ページ上の特定の要素をブラウザー内の位置に固定したいというものです。よく見るポップアップ広告と同じように、スクロール バーをどのようにスクロールしても、位置は変わりません。方法としてはjsコントロールを使うかcssを使うのが一般的です。ここで書くのはcssの制御方法です。

IE7 以降および Firefox、Opera、Safari では、CSS 属性「position:fixed」がサポートされており、その機能はウィンドウに対する要素の位置を固定することです。コードは次のとおりです。

#ads{
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
}

#ads の ID スタイルを定義し、その高さと幅を設定します。位置:固定、右と下に要素をウィンドウの右下隅に配置します。

ブラウザ ウィンドウを参照として直接配置するには、position:fixed を使用します。ページ内でフローティングし、ブラウザを移動しない限り、要素の位置はブラウザ ウィンドウのスクロール バーによって変更されません。画面上 ウィンドウの画面位置、またはブラウザ ウィンドウの表示サイズの変更。これにより、固定配置された要素は常にブラウザ ウィンドウ内のビューのどこかに配置され、ドキュメントの流れの影響を受けません。

ただし、IE6 では、position:fixed 属性はサポートされていないため、現時点では、IE6 をハックする必要があります。解決策は、position:absolute 属性を使用することです。その機能は誰にとってもよく知られています。これは、親要素を基準とした絶対位置を実行します。その後、式を通じて #ads の最上位の値を変更できます。

PS 式の定義: IE5 以降のバージョンでは、CSS 属性を Javascript 式に関連付けるために、CSS での式の使用がサポートされています。ここでの CSS 属性は、要素の固有属性であることも、カスタム プロパティであることもできます。つまり、CSS 属性の後に Javascript 式を続けることができ、CSS 属性の値は Javascript 式の計算の結果と等しくなります。式の中で要素自体のプロパティとメソッドを直接参照することも、他のブラウザ オブジェクトを使用することもできます。この式は、この要素のメンバー関数内にあるかのようになります。

CSS で JavaScript の値を計算することで、一番上の値を変更できます。コードは次のとおりです:

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + 
            documentElement.clientHeight-this.offsetHeight);
}

すべてが完璧であるように見えますが、IE6 で実行すると、スクロールバーが動くと、#ads の友達が震えることがわかります。解決策も非常に簡単で、次のように本文に少し CSS を追加するだけです:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}

わかりました、完了! ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！

PS: "url(text.txt)" は元々使用されていましたが、txt が存在しません。http リクエストで 404 エラーが報告され、読み込み速度に影響しました。インターネット上のいくつかの記述方法を参照し、 about: 空白でも同じ目的を達成できます。

IE6は固定には対応していないのですが、スタイルのバックグラウンドは固定に対応しているのが原則と言われていますが、バックグラウンドを利用することでジッターをなくすことができますので、アドバイスをいただければ幸いです。

完全なコード:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}
#ads{
    width:300px;
    height:250px;
    position:fixed;
    right:0;
    bottom:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop +
        documentElement.clientHeight-this.offsetHeight);
    border:1px solid red;
}

以上がCSSで要素の位置を変更しないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。