CSS の配置の問題 (3): 相対配置、絶対配置_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS の配置の問題 (3): 相対配置、絶対配置_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:19 AM

はじめに:

最初に、画面全体を満たすように 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>

この時点で、Box-2 はドキュメントフローから外れており、その効果は次のとおりです:

この時点で、位置はボックス 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 ブロックレベルの要素の水平方向のセンタリング

.item1{            position:relative;            z-index:3;        }        .item2{            position:absolute;            top:0;            right:0;            z-index:1;        }

1.3 複数のブロックレベル要素を水平方向に中央揃え

/*行内元素水平居中*/        #body-div{            text-align:center;        }

2. 水平方向の垂直方向の中央揃え

2.1 既知の幅と高さでの垂直方向の水平方向の中央揃え

/*块级元素水平居中*/        #body-div{            margin:0 auto;        }

2.2 垂直方向の水平方向のセンタリング幅と高さが不明

/*多个块级元素水平居中*/        #body-div{            text-align:center;        }        ##body-div-container{            display:inline-block;        }

2.3 の場合、中央に配置された要素はインラインまたはインラインブロックです

/*已知高度和宽度的水平垂直居中*/        #body-div{            position:relative;        }        #body-div-container{            width:100px;            height:100px;            position:absolute;            top:50%;            left:50%;            margin:-50px 0 0 -50px;        }

声明

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

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles