位置の測位を理解する

htmlでは、レイアウトを変更する方法としてfloatとpositionpositioningとは何かを今日は説明します。 位置は CSS の非常に重要な属性です。position 属性を使用すると、要素を通常の位置、親要素、またはブラウザ ウィンドウに対してオフセットできます。

position 属性は、positioning と呼ばれます。これらのタイプは、position 要素の生成方法に影響します。

Position には

4

属性値があります: 1.static、2.relative、3.absolute、4.fixed。これらの属性。 静的: デフォルトの配置です。位置を変更することなく、Web ページは通常のドキュメント フロー ルールに従って配置されます。

相対

: 相対的な位置決めです。要素は通常のドキュメント フローに従って順序付けされます。ただし、要素の位置は、left

、top、bottom、rightおよびその他のcssルールを通じて変更できます。ウェブページをより美しく見せます。 Absolute: 絶対的な配置です。要素はドキュメント フローから分離されます: top

、left、right、bottom、など css 要素の位置。ウェブページを美しく見せます。 固定: 固定位置です。要素は通常のドキュメント フローから分離され、要素はブラウザ上の固定位置に設定され、要素と一緒にスクロールしません。要素は、top

、left、right、bottomなどのcssルールを通じて要素の位置を変更できます。 Absolute: static

ではない最も近いレベルの配置の親要素に対して相対的に配置されます。要素がabsoluteに設定されると、ドキュメントフローから切り離されます。元のスペースを占有しません。次の要素が置き換えられます。 relative は中国語に翻訳すると、相対配置となります。この属性を設定すると、要素は上、左、下、右に従ってオフセットされます。重要な点は、元のスペースが保持されることです。 Fixed

(古い

IE

ではサポートされていません) は、絶対 (固定) 配置の要素を生成します。通常はブラウザー ウィンドウを基準にして配置されます。

そして relative は、通常の位置に対して相対的に配置される相対的に配置された要素を生成することです。

静的この属性値は、すべての要素のデフォルトの配置です。通常の状況では、特に宣言する必要はありませんが、継承が発生した場合、要素によって継承された属性がそれ自体に影響を与えることを望まない場合があります。 position:static を使用すると、継承をキャンセルできます。つまり、要素の位置のデフォルト値を復元できます。

Inherit: 継承された属性。 位置属性の値が親要素から継承される必要があることを指定します。

！注: 多くの Web ページでは、要素が絶対的に配置されているため、解像度が異なると表示にずれが生じます。この場合、次のような方法で処理できます。

上記は

htmlのcss属性のposition属性についての説明です。cssのposition関数は非常に強力で、非常に実用的な位置決め属性でもあります。位置の配置は Web デザインで非常に一般的に使用される属性だと思います。私の説明がお役に立てば幸いです。