CSSのposition属性で：fixedの使い方-CSSチュートリアル-php.cn

CSSのposition属性で：fixedの使い方

怪我咯

リリース： 2017-06-22 10:16:31

オリジナル

6804 人が閲覧しました

position 属性は、要素の配置タイプ、つまり要素のレイアウトを確立するために使用される配置メカニズムを指定します。どの要素でも配置できますが、絶対配置または固定配置された要素は、要素自体のタイプに関係なく、ブロックレベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。

位置デフォルトの静的属性に加えて、相対、絶対、および固定属性値もあります。この記事では固定属性値に焦点を当てます。

1.position:fixed 属性の意味

fixed: 絶対位置の要素を生成し、ブラウザウィンドウを基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

通常、固定位置と呼ばれるものは、固定位置の要素はスクロールバーで上下にスクロールしません。

2. 一般的なposition:fixed;実装メソッド

#top{position:fixed;bottom:0;right:20px}は、topのIDを持つ要素がブラウザの下部、から20ピクセルに固定されていることを認識します。 right

#top{position:fixed;top:20px;right:20px} は、ID が top の要素がブラウザーの上から 20 ピクセル、右から 20 ピクセルの位置に固定されていることを認識します

3. 下に配置しますIE6: 修正済み; 実装メソッド

は IE6:position:fixed; では直接使用できません。これを修正するには CSS ハックが必要です

同じことは、

...

要素をブラウザの下部、右から 20 ピクセルに固定することです。今回のコードは次のとおりです:

#top{position:fixed;bottom:0;right:20px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

ログイン後にコピー

right 属性と left 属性は絶対配置を使用して解決できますが、top とbottom は上記の expression を使用して実装する必要があります。 _position:absolute; の _ 記号は、他のブラウザーでのみ認識されます。

1. 要素をブラウザーウィンドウの上部に固定します。ブラウザウィンドウの上部から 1 ピクセルの位置:

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));}

ログイン後にコピー

または

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
_margin-top:a;
}

ログイン後にコピー

3. 要素をブラウザウィンドウの下部に固定します:

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+a));
}

ログイン後にコピー

4. 要素を上から b ピクセルの位置に固定します。ブラウザウィンドウの下部:

#top{
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

ログイン後にコピー

または

#top{
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:b;
}

ログイン後にコピー

以上がCSSのposition属性で：fixedの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。