.item2{ position:absolute; top:0; right:0; }/*块级元素水平居中*/ #body-div{ margin:0 auto; }
CSS の配置の問題 (3): 相対配置、絶対配置_html/css_WEB-ITnose
はじめに:
最初に、画面全体を満たすように div ボックスを設定する方法を最初に解決したいと思いました。
次の HTML コードを見てください:
<body> <div id="father-body"> <div class="item1"></div> </div></body>
実装方法 1:
html, body,#father-body{ height:100%; width:100%; background-color:#123456; }ここでは主に CSS における % (パーセント記号) の使用について説明します。 % は、親要素または祖先要素に固定の幅と高さが定義されている場合にのみ使用できます (または使用すると効果があります)。
実装方法 2:
#father-body{ position:fixed; width:100%; height:100%; background-color:#123456; }ここでは、#father-body の Position 属性を設定して、独自の BFC をトリガーします。それ自体に幅と高さを使用した場合にのみ有効になります。
位置の固定値の意味:
オブジェクトは通常の流れから外れ、スクロール時にウィンドウを基準点として上、右、下、左などの属性を使用して配置されます。バーが表示されると、オブジェクトは一緒にスクロールしません。
position 属性のいくつかの値の概念:
1. 相対位置決め
上記の定義を使用して、コードの一部を見てみましょう:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; /*top:40px; left:40px;*/ margin:40px 0 0 40px; } </style></head><body> <div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div></body></html>その効果
右上、左下などの属性を使用する場合、CSS コードは次のとおりです:
<style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; top:40px; left:40px; /*margin:40px 0 0 40px;*/ } </style>確認できる効果は次のとおりです:
ここに移動して確認してください右上下左を使用する場合 (これら 4 つの各属性は、特定のピクセル数またはパーセンテージを設定できます) このように、属性が要素の位置を変更しても、他の要素の位置には影響しません。 margin などの属性を使用して要素の位置を変更すると、他の要素の位置に影響します。
概略図は次のとおりです (W3CSchool からの画像):
2. 絶対位置決め
次のコード部分を見てください。エフェクト画像は次のとおりです:
私たちは Box-2 です 絶対位置属性を設定します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:20px;} #body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; } #body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; } </style></head><body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> </div></body></html>この時点で、位置はボックス 3 の は、ボックス 2 の前の位置を占めます。そして、Box-2 と Box-3 の左側の境界線が重なり合います。また、ボックスの幅はボックス内の要素に応じて調整されます。
ボックスが絶対位置に設定されているが、ボックスのオフセットの設定に右上下左を使用しない場合、ボックスは元の位置を占めます。
では、プロパティを右上と左下に設定すると、どのような効果が得られるでしょうか?
次のコードを設定します:効果は次のとおりです:rrree
それでは、直接の親要素を位置決めされた要素に設定するとどうなるでしょうか?
上記から 2 つの結論が導き出されます:
1. 絶対配置を使用するボックスは、その「最も近い」「既に配置されている」「祖先要素」に基づいてオフセット (配置) されます。配置されている祖先要素がない場合、配置はブラウザ ウィンドウに基づいて行われます。 2. 決定的に配置されたボックスは標準フローから切り離されます。つまり、後続の兄弟ボックスの配置に影響を与えません。他のボックスは、このボックス (絶対位置のボックス) が存在しないかのように動作するようです。3.z-index 属性
z-index 属性は、その名の通り、ページが x-y 軸の場合、それに垂直な方向の、重なっているブロックの上下の位置を調整するために使用されます。ページは z 軸です。大きな Z インデックスを持つページは、小さな Z インデックスを持つページの上に配置されます。
以下のコードを見てください:
.item2{ position:absolute; }ログイン後にコピー
一般的な位置拡張:
私は以下のコードを個人的にテストしており、効果が得られるので、レンダリングは示しません(コードに興味がある場合) ご質問がございましたら、メッセージを残してください):
1. 水平方向のセンタリング
1.1 インライン要素の水平方向のセンタリング .item2{ position:absolute; top:0; right:0; }ログイン後にコピー
1.2 ブロックレベルの要素の水平方向のセンタリング .item2{ position:absolute; top:0; right:0; }
.item1{ position:relative; z-index:3; } .item2{ position:absolute; top:0; right:0; z-index:1; }
/*行内元素水平居中*/ #body-div{ text-align:center; } /*块级元素水平居中*/ #body-div{ margin:0 auto; }ログイン後にコピー
2.2 垂直方向の水平方向のセンタリング幅と高さが不明 /*块级元素水平居中*/ #body-div{ margin:0 auto; }
/*多个块级元素水平居中*/ #body-div{ text-align:center; } ##body-div-container{ display:inline-block; }
/*已知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } #body-div-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7364
15
1628
14
1353
52
1265
25
1214
29
固定的な配置はドキュメント フローから切り離されますか?
Feb 20, 2024 pm 05:24 PM
固定配置はドキュメント フローから切り離されますか? 特定のコード例が必要です。Web 開発では、レイアウトは非常に重要なトピックです。その中でも、ポジショニングはよく使われるレイアウト手法の 1 つです。 CSS には、静的配置、相対配置、および絶対配置という 3 つの一般的な配置方法があります。これら 3 つの位置決め方法に加えて、スティッキー位置決めという、より特殊な位置決め方法もあります。では、スティッキーな配置はドキュメント フローから切り離されるのでしょうか?以下で詳しく説明し、理解を助けるためにいくつかのコード例を示します。まず、ドキュメント フローとは何かを理解する必要があります
CSSで画像を真ん中に配置する方法
Apr 25, 2024 am 11:51 AM
CSS で画像を中央に配置するには、display: block; と margin: 0 auto; を使用する主な方法が 3 つあります。フレックスボックス レイアウトまたはグリッド レイアウトを使用し、align-items または justify-content を中央に設定します。絶対位置を使用し、上と左を 50% に設定し、transform(-50%, -50%); を適用します。
CSSで要素を配置する方法
Apr 26, 2024 am 10:24 AM
CSS 要素の配置には、静的、相対、絶対、固定配置の 4 つの方法があります。静的配置がデフォルトであり、要素は配置ルールの影響を受けません。相対配置では、ドキュメント フローに影響を与えることなく、要素をそれ自体に対して相対的に移動します。絶対配置では、要素をドキュメント フローから削除し、その要素をその祖先要素に対して相対的に配置します。固定配置では、ビューポートを基準にして要素を配置し、要素を常に画面上の同じ位置に保ちます。
CSSのbottom属性構文
Feb 21, 2024 pm 03:30 PM
CSS の Bottom 属性の構文とコード例 CSS では、bottom 属性は要素とコンテナの下部の間の距離を指定するために使用されます。親要素の下部を基準とした要素の位置を制御します。ボトム属性の構文は次のとおりです: element{bottom:value;} ここで、element はスタイルが適用される要素を表し、value は設定されるボトム値を表します。 value にはピクセルなどの特定の長さの値を指定できます
レイアウトレイアウトとは何ですか？
Feb 24, 2024 pm 03:03 PM
レイアウトとは、Web ページの要素を特定の規則と構造に従って配置および表示するために Web デザインで採用される組版方法を指します。合理的なレイアウトにより、Web ページはより美しく、整然とし、優れたユーザー エクスペリエンスを実現できます。フロントエンド開発では、従来のテーブル レイアウト、フローティング レイアウト、位置決めレイアウトなど、多くのレイアウト方法から選択できます。しかし、HTML5 や CSS3 の推進により、Flexbox レイアウトやグリッド レイアウトなどの最新のレスポンシブ レイアウト技術が主流になりました。
HTML5でボックスを中央に配置する方法
Apr 05, 2024 pm 12:27 PM
HTML5 でボックスを中央揃えにするには、次の方法があります: 水平方向の中央揃え: text-align: centermargin: autodisplay: flex; justify-content: center; 垂直方向の中央揃え:vertical-align: middletransform: translation(-50%, -50% ); 位置: 絶対; 上: 50%; 左: 50%; 変換: 変換(-50%, -50%);
HTMLでテキストボックスを整列させる方法
Mar 27, 2024 pm 04:33 PM
HTML でテキスト ボックスを整列する方法: 1. テキストの整列; 2. Flexbox レイアウトの整列を使用する; 3. グリッド レイアウトの整列を使用する; 4. 微調整にマージンまたは位置を使用する。
ブートストラップでコンポーネントの位置を調整する方法
Apr 05, 2024 am 03:00 AM
ブートストラップでは、コンポーネントの位置を調整するさまざまな方法が提供されます。 Offset クラス: コンポーネントを水平方向にオフセットします。補助クラス: コンポーネントの位置合わせを調整します。グリッド システム: コンポーネントがグリッド内で占める列の数を制御します。インライン要素: フローティング レイアウトを作成します。絶対配置: コンポーネントを通常のフローから移動し、ページ上の任意の場所に配置します。
