ホームページ >ウェブフロントエンド >CSSチュートリアル >html CSSにおける相対配置と絶対配置のまとめ

html CSSにおける相対配置と絶対配置のまとめ

零下一度
零下一度オリジナル
2017-06-05 14:09:024727ブラウズ

位置決めとは、方向を決定すること、場所を決定または指摘すること、この土地の境界を特定するために位置または境界を決定することを指します。

CSS の位​​置指定内容は次のとおりです: 位置: 相対 | 固定 | static には特別な設定はなく、基本的な位置決め規則に従い、z-index を介して階層化することはできません。テキスト フローでは、どの要素もテキスト フローによって独自の位置が制限されますが、CSS を使用すると、float を使用して要素をフローティングにすることができ、また、 margin を使用して要素を変更することもできます。位置の移動。

1. CSS における絶対配置と相対配置の詳細な紹介

html CSSにおける相対配置と絶対配置のまとめhtml CSSにおける相対配置と絶対配置のまとめ

階層関係は次のとおりです。

2. CSS の相対配置と絶対配置について

要素 位置が設定されている場合、デフォルトは静的です。この時点では、要素は位置決めされず、left/right などのオフセット属性は影響しません。

3.

絶対位置に関する包括的な理解と分析

要素の位置は、通常のフロー内の位置に対して相対的なものであるためです。絶対配置された要素は、最も近い配置された祖先を基準にして配置されます。要素に配置された祖先がない場合、その位置は元の包含ブロックを基準に配置されます。


位置が設定されていない前は、図に示すように、標準的なドキュメント フローに準拠した小さな箱に包まれた大きな箱です

html CSSにおける相対配置と絶対配置のまとめ
4。 -インタビュー終了 質問 No. 8 - 絶対位置決めと相対位置決め

相対位置決め (相対):

まず相対位置決めについて話しましょう: その名前のように相対的であるように、参照オブジェクトが存在する必要がありますが、この参照は何もありませんそれ以外の場合は、元のドキュメント フロー内での独自の位置になります。相対位置決め後のオブジェクトはドキュメント フローから完全に分離されておらず、ドキュメント内のオブジェクトの元の位置が保持され (トイレに座ったまま)、オフセットされたオブジェクトが他のレイヤーを覆います。

5.

CSSの3つの基本的な位置決めメカニズムの詳細な説明

CSSには、通常のフロー、フローティング、および絶対位置決めという3つの基本的な位置決めメカニズムがあります。

特に指定がない限り、すべてのボックスは通常の流れに配置されます。つまり、通常のフロー内の要素の位置は、(X)HTML 内の要素の位置によって決まります。

ブロックレベルのボックスが上から下に順番に配置され、ボックス間の垂直距離はボックスの垂直マージンから計算されます。

6.

CSS の 4 つの一般的な配置属性の概要 (左、右、上、下)

DIV CSS 左、右、上、下の配置 これら 4 つの CSS 属性スタイルは、オブジェクト ボックスの配置に使用されます。絶対的または相対的なものとして。

Left は、現在の要素の左側と親要素の左側 (元のデフォルト位置) の間の距離の値です。

Right は、現在の要素の右側と親要素の右側の間の距離の値です。

上端は、現在のオブジェクトの上端と元の位置の上端の間の距離です。

Bottom 現在のオブジェクトの下部は元の位置からどのくらい離れていますか?

7. CSS 位置の相対位置と絶対位置の違いを分析します

位置には次の属性があります: static、inherit、fixed、絶対、相対

上位 3 つ 理解しやすく区別しやすい: 51dd36d46c925ef266dd37a656745f71-0 (1).jpg静的: デフォルトの状態であり、位置決めはなく、要素は通常のフローで表示されます (上、下、左、右、または z-index ステートメントは無視されます)。 。

nherit: 親要素からposition属性の値を継承します。

修正: ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。 (つまり、ブラウザをスクロールすると、要素は常にウィンドウの表示領域の特定の位置に表示されます)。

絶対と相対はより一般的に使用され、初心者はそれらの違いは何ですか?

8. HTML CSS は位置とフィルターの詳細を決定します

.position:relative; 相対位置は要素自体の特性には影響しません。

要素がドキュメント フローから切り離されることはありません。配置オフセットがない場合、要素自体には影響しません。

配置要素の位置制御: 上/右/下/左;

IE6 での親のオーバーフロー: サブセットの相対的な配置をカバーできません。解決策は、親に

を追加するだけです。次のレベルに位置決め要素を追加します。IE6 では、親の位置決め要素の幅と高さが奇数の場合、位置決め要素の下部と右側には

の偏差が生じます。

1px

9.

CSS 配置 (配置) | CSS オンラインマニュアル

CSS 配置プロパティを使用すると、要素を配置できます。また、ある要素を別の要素の後ろに配置し、ある要素のコンテンツが大きすぎる場合に何が起こるかを指定することもできます。

要素は、top、bottom、left、right 属性を使用して配置できます。ただし、これらのプロパティは、position プロパティが最初に設定されない限り機能しません。位置決め方法に応じて、動作方法も異なります

4 つの異なる位置決め方法があります。

関連する質問と回答:

1.

html-css の配置さまざまな携帯電話の幅で WeChat の下にある赤いメッセージを実現するにはどうすればよいですか? 2. CSS の配置に関する問題のパーセンテージとパディング マージン境界線競合

【おすすめ関連記事】:1.

Googleの位置情報をWebサイトに追加する方法

2.

CSSボックスモデルの位置の詳細な分析

以上がhtml CSSにおける相対配置と絶対配置のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。