CSSで固定された位置決め属性positionの使用法についての紹介

この記事では、CSS で固定されている位置属性の使用法を主に紹介します。これを必要な友人に共有します。

div を配置したい場合は、最初の反応は位置属性です。デフォルト値に加えて、位置属性には絶対値、相対値、固定値も含まれます。理解できない人は、HTML で参照してください。最初の反応は位置属性です。位置属性にはデフォルト値に加えて、絶対値、相対値、および固定値もあります。固定に設定すると、左、右、上、下の値を設定することで、本体に対して相対的に配置できます。

コード:

.my-fiexd{ 
position:fixed; 
height:40px; 
width:40px; 
background-color:red; 
border:0px; 
}

しかし、スクロールバーのスクロールに合わせて p を固定に設定すると (上、多くのメニューでこれが行われます)、小さな現象が発生する可能性があります (バグとも言えます)。特定のコードには立ち入らず、現象と解決策についてのみ説明します。

高さ 100px のページに id が my-fixed の p がある場合、my-fixed の高さは 20px で、スクロール バーが 30px までスクロールすると、my-fixed が fiexd 属性で追加され、次に my-fixed が追加されます。 -fixed はこの時点でページを分離します。対応するページの高さも 20px 減算され、ページの高さは 80px になります。この時点でスクロール バーがスクロールできる最大の高さは 30px 未満である可能性があります。今度は、my-fixed は fix を追加し続け、時間が点滅し続け、最終的に my-fixed は fix を追加しません。

解決策は、my-fixed の外層に p を追加し、my-fixed と同じ高さを設定することです。そうすることで、my-fixed が切り離されてもページの高さは減らず、ちらつき現象は発生しません。避けてください

追伸: ブログを書くのは初めてです。表現があまり明確ではないかもしれませんが、一般的な意味は正しいはずです。同じ問題に遭遇した場合、より良い解決策がある場合は、質問を歓迎します。知っています

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

css3 によって実装された垂直セカンダリ ナビゲーション

position:fixed 属性を使用して DIV を中央に配置する方法

以上がCSSで固定された位置決め属性positionの使用法についての紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。