CSSのposition属性の値は何ですか-CSSチュートリアル-php.cn

CSSのposition属性の値は何ですか

下次还敢

リリース： 2024-04-26 11:39:14

オリジナル

1051 人が閲覧しました

position 属性は、次の値を含む要素の配置方法を指定します: static: ドキュメントフロー内の要素の通常の位置相対: 他の要素に影響を与えずに、元の位置を基準に移動絶対: ドキュメントフローから削除、親要素または本文に従って配置固定: ビューポートで固定、スティッキースクロール時に位置を維持: しきい値に達した後、ビューポートまたはコンテナーで固定

CSSのposition属性の値は何ですか

CSS のposition属性値

位置属性は、親要素またはページ配置メソッドで要素を指定するために使用されます。可能な値は次のとおりです:

1. static (デフォルト)

要素はドキュメントフロー内の通常の位置に配置されます。

2. 相対

要素は、他の要素の位置に影響を与えることなく、元の位置に対して相対的に移動します。

3. 絶対

要素はドキュメントフローから削除され、その親要素または <body> 要素 (親要素が指定されていない場合) に基づいて配置されます。 <body> 元素（如果未指定父元素）定位。

4. fixed

元素与视口固定，滚动页面时保持在同一位置。

5. sticky

元素在达到指定阈值后固定在视口或容器中。

使用示例：

<code class="css">/* 将元素向右移动 50px */
.element {
  position: relative;
  left: 50px;
}

/* 将元素从页面顶部 100px 处开始定位 */
.element {
  position: absolute;
  top: 100px;
}

/* 将元素固定在视口右侧 */
.element {
  position: fixed;
  right: 0;
}</code>

ログイン後にコピー

选择合适的 position 值的指南：

如果元素需要位于文档流的正常位置，请使用 static。
如果需要相对其原始位置移动元素，请使用 relative。
如果需要从文档流中移除元素，请使用 absolute 或 fixed。
如果需要在滚动时将元素固定在视口中，请使用 sticky

🎜4.固定🎜🎜🎜🎜要素はビューポートに固定され、ページがスクロールされても同じ位置に残ります。 🎜🎜🎜🎜5. スティッキー🎜🎜🎜🎜 指定されたしきい値に達すると、要素はビューポートまたはコンテナー内で固定されます。 🎜🎜🎜🎜使用例: 🎜🎜rrreee🎜🎜適切な位置値を選択するためのガイドライン: 🎜🎜🎜🎜要素がドキュメントフロー内の通常の位置にある必要がある場合は、static を使用します。 🎜🎜元の位置を基準にして要素を移動する必要がある場合は、relative を使用します。 🎜🎜ドキュメントフローから要素を削除する必要がある場合は、absolute または fixed を使用します。 🎜🎜スクロール中にビューポート内に要素を保持する必要がある場合は、sticky を使用します。 🎜🎜

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