CSSで要素を修正する方法

CSS では、position 属性を使用して要素を固定できます。位置を固定するには、要素に「position:fixed」スタイルを追加するだけです。固定位置はウィンドウに対して相対的に配置され、スライダーを移動するかどうかに関係なく、ウィンドウに対して固定位置に固定され、他の要素はその存在を無視して位置配置されます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

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

#ads の ID スタイルを定義し、その高さと幅を設定し、position:fixed と right andbottom を使用して要素をウィンドウの右下隅に配置します。

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

式の定義: 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; /*必须*/
}

完全なコード:

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 ビデオ チュートリアル

以上がCSSで要素を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。