非絶対位置指定の絶対絶対位置の使用_html/css_WEB-ITnose

1. 絶対位置決めの一般的な用途

一般的に、絶対位置決めは何に使用しますか?名前が示すように、特定の位置に固定されます。たとえば、ライトボックス効果は、Sina Weibo のポップアップ プロンプト メッセージなどに使用される絶対位置です。Li Bingbing 姉妹の Weibo を転送したい場合、次の結果がポップアップ表示されます。親の相対配置タグと組み合わせて使用​​すると、Renren.com の検索ドロップダウン メニュー効果など、親タグを基準とした絶対配置効果を実現できます。

ここで不可欠な使用法は、左 (右) 絶対配置です。値または上（下）の値。それ以外の場合は、

絶対位置決め位置が続きます。左を 0 に設定し、上を 0 に設定すると、値は同じになります
。はい、特に斜体と太字で記載しましたが、なぜですか?この文は間違っているので、それに気づかない場合は、この記事を注意深く読む必要があることを意味します。

まあ、他の人はそうではないかもしれませんが、position:absolute についての私の理解は、長い間定着していなかった、または落ち着いて勉強する機会がなかったと言えます。大まかなアイデアなので、誤解があるかもしれません。そのうちの 1 つは、絶対位置を持つ要素が left、top などの値に設定されていない場合、 left:0;top:0; と同じ効果になります。実際は違います。 2. 絶対的な要素のマージンポジショニング

絶対的なポジショニングとマージンポジショニングは、ある定義では、どちらも同じ役割を持ち、競合するものであるように見えます。はい。ただし、位置決め値が設定されていない絶対要素はマージンを使用して配置できます。小さな例として、マージン属性を持ち、左、上、その他の固定値を持たない絶対位置の画像である以下のコードを参照してください:

実際には、絶対要素が設定されているかどうかに関係なく、絶対位置とマージン位置の間に競合はありません。 left/top 値とその margin 属性値はすべて機能します。以下に、左/上の値を持たない絶対要素のマージン位置を示します。

<img data-src="http://image.zhangxinxu.com/image/blog/zxx_90_0824.jpg" width="90" height="111" style="position:absolute; margin:50px 0 0 50px;" />

結果は以下のようになります:

ここをクリックできます: この小さなサンプルデモ

絶対要素がマージンを介して配置できることがわかります。前提として、左セットやトップセットなどの位置決め値はありません。これは私の理解です。絶対位置の値を持たない絶対位置の要素はドキュメント フローから分離されていません (おそらく間違っています) (現在、この理解は間違っており、ドキュメント フローから分離されています)。証拠は次のとおりです。 絶対位置指定値を持たない絶対要素を通常の div 内に配置し、この要素は div の外で実行されません。サンプルコード:

<div style="width:200px; height:120px; background:#f0f3f9; margin:40px;"><img data-src="http://image.zhangxinxu.com/image/blog/zxx_90_0824.jpg" style="position:absolute;" /></div>

結果は以下のようになります:

ここをクリックしてください: このサンプルデモ

位置決め値を設定しない絶対要素は、ありきたりで特殊な要素であると言えます。通常は、それが DOM ツリー内に存在することですが、マージンなどの属性の影響を受けます。通常と異なるのは、実際の高さと幅が失われることです。これは float と非常によく似ています。フローティング要素が占める実際の高さは「ラップして破棄」し (詳細についてはここをクリック)、絶対要素 (位置決め値なし) も「ラップして破棄」します。ただし、その「破壊」は float よりも激しく、実際の高さが存在しないだけでなく、実際の幅も存在しません。大まかな結論を言うと、絶対配置要素は浮動要素よりも倒錯したものです。

3. 絶対配置要素の非絶対配置

上記の部分から、2 つの結論を導き出すことができます。1 つ目は、配置値のない絶対要素はマージンを使用して配置できます。2 つ目は、配置値のない絶対要素には実際の浮動幅がありません。要素。

これら 2 つの点は非常に重要であり、これら 2 つの機能を使用して特別な位置決め効果を実現できます。 2 つの例、1 つはテキスト投影効果、もう 1 つはアダプティブ レイアウトです。

テキストシャドウ効果

CSS3にはテキストシャドウ効果を実現できるtext-shadow属性がありますが、IEはCSS3を十分にサポートしていないため、Absolute+marginを実装することを考える必要があります。メソッド メソッド。Firefox 3.5 から取得した以下のレンダリングを参照してください:

関連するコードは次のとおりです:

css コード:

.zxx_show{padding:20px; background:#f0f3f9; color:#aaaaaa; font-size:14px;}.zxx_text{position:absolute; margin:-1px 0 0 -1px; color:#333333;}

HTML コード:

りー

ここをクリックしてください: テキスト投影効果のデモ

絶対配置要素は投影されるテキストの前に記述する必要があります。絶対要素が占める実際の高さと幅は 0 であるため、テキストはその下に自然に表示されます。下のテキストは色が明るいため、投影効果が形成されます。 。この方法は非常に微妙ですが、残念ながら、IE6 では投影方向が右方向ですが、IE7 では右上方向になります。これを修正するにはハックが必要です。

アダプティブ レイアウト
位置決め値のない絶対要素は、より異常な浮動要素であるため、浮動要素で実行できる一部のことは、アダプティブ レイアウトなどの絶対要素でも実行できます。たとえば、Facebook の動的アバターやコンテンツの説明ではこの方法が使用されます。

アバターの幅は固定されているため、説明タグの場合、マージンまたはパディングを使用して特定の距離を広げることができ、アバターは位置決め値なしで絶対位置を使用するため、アバターと説明の適応レイアウト効果が実現します。 。

たとえば、私のブログの個人情報紹介では、float アダプティブ レイアウトが使用されています。実際、下の図に示すように、float 属性をAbsolute に置き換えても同じ効果があります。デモについては、ここをクリックしてください: 絶対アダプティブ レイアウト デモ

下の写真は、デモ効果のスクリーンショットです:

絶対 絶対位置決めには他の非絶対位置決めアプリケーションがあるはずです。位置決めなしの絶対位置を覚えておいてください。 value 要素は実際の幅を持たない単なる float 要素です。この機能を使用して創造性を発揮し、よりエキサイティングな効果を実現します。

4. 最終的なまとめ

最後に、最初に浮かんだ疑問に答えましょう: 絶対位置を持つ要素が left、top などに設定されていない場合、効果は left:0 とは異なります。トップ：0？たとえば、div には絶対属性要素があり、通常の inline-block 属性要素と同様に、div 内に静かに残ります。 left:0;top:0;申し訳ありませんが、この絶対要素はすぐに変換され、ドキュメント フローとは関係なく、DOM ツリーから直接分離されます。結果は、最も近い相対属性の祖先タグを基準にして配置されます (そうでない場合は、体によって配置されます）。通常、leftやtopなどの値がないとabsoluteを使用できないため、概念が不明瞭です。

各 CSS プロパティにはストーリーがあり、それを発見して理解するには落ち着いて行う必要があります。

(この記事は終わり)