ホームページ > ウェブフロントエンド > CSSチュートリアル > 絶対に配置された要素が期待した場所にないのはなぜですか?

絶対に配置された要素が期待した場所にないのはなぜですか?

Barbara Streisand
リリース: 2024-12-11 04:25:17
オリジナル
886 人が閲覧しました

Why Isn't My Absolutely Positioned Element Where I Expect It?

絶対配置の問題が解決されました

特定の要素が絶対配置ガイドラインに準拠していない可能性があります。要素がページの左上隅など、予期しない場所に表示される可能性があるため、これはイライラする可能性があります。

問題の特定

提供されたコードは、 ID「absPos」を持つ要素を親 div 内に絶対的に配置します。ただし、CSS 設定は無効のようです。

コード サンプル

...
<div>
ログイン後にコピー
ログイン後にコピー

解決策

このシナリオでは、課題は、「absPos」の親ノード間に配置された要素が存在しないことです。その結果、この要素は、位置指定された要素ではない body 要素を offsetParent として使用します。

解決策は、親 div に 'position:relative' を適用することです。これにより、親が位置決めされた要素に変わり、その子要素 ​​'absPos' の offsetParent として確立されます。

改訂されたコード サンプル

...
<div>
ログイン後にコピー
ログイン後にコピー

この調整により、次のことが保証されます。 「absPos」要素は、配置された親に対して相対的な位置にあるため、定義された絶対位置に準拠します。

以上が絶対に配置された要素が期待した場所にないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート