css_position_html/css_WEB-ITnose の関連使用法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css_position_html/css_WEB-ITnose の関連使用法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:38 AM

はじめに

position は位置を固定するために使用され、特に重要な属性です

その値は次のとおりです:

static: デフォルト値、上、下、左、右、または z-index 宣言を無視します

relative: に相対親領域と前のサブセット領域の位置は、上、下、左、右で設定されます。 Z-index を使用できます

絶対: 親領域の位置 [左上隅] を基準とした相対的な位置を指定します。 top 、bottom、left、right を設定するには、z-index を使用できます

fixed: ブラウザの位置を基準にして、親の位置などの他の位置を無視して、Z-index を使用できます

inherit: プロパティを継承します親位置の

特定

 1 <style type="text/css"> 2 div 3 { 4 position:100px 100px; 5 width:100px; 6 height:100px; 7 border:5px solid black; 8 } 9 div.pos_left10 {11 position:relative;12 left:-20px;13 border:5px solid green;14 }15 div.pos_right16 {17 position:relative;18 left:20px;19 border:5px solid green;20 }21 div.pos_ab22 {23 position:absolute;24 left:30px;25 top:50px;26 border:5px solid blue;27 }28 div.main29 {30 position:absolute;31 left:100px;32 top:50px;33 width:200px;34 height:300px;35 border:5px solid red;36 }37 div.pos_fix38 {39 position:fixed;40 left:10px;41 top:0px;42 clip:rect(0px 50px 200px 0px);43 }44 </style>45 </head>46 47 <body>48 <div class="main">49     <div>1.normal</div>50     <div class="pos_left">2.re-left:-20px</div>51     <div class="pos_right">3.re-left:20px</div>52     <div class="pos_ab">4.ab-(left:30px,top:50px)</div>53     <div class="pos_right">5.re-left:20px</div>54     <div class="pos_fix">6.fix-(left:30px,top:50px)</div>55 </div>

その内:

[2],[3],[5] は相対

位置:相対

を設定する場合は、コンテンツエリアの左上を参照してください親要素内の前の子要素の角がTRBL属性と組み合わせて原点として配置されます。親がない場合は、BODY の左上隅が元の点として使用されます

?? 前の子要素の左上隅は 2 ～ 3 の左上隅ではないことに注意する必要があります画像では表示していますが、[2] 静的な場合、TRBL の場合は位置を変換しない左上隅です。

??つまり、相対要素が TRBL 変換されても、その要素が占める間隔は元の間隔のままであるため、他の要素をカバーします。

よりわかりやすい表示:

画像の [2] を変更します:

left:-20px;

次に、次のようにします。

写真には【 [2]とその上下の空白[3]の間の領域が実際に[2]が占有する空間です

[4]は絶対

position:relative

が設定されている場合、親は位置決めのための TRBL 属性と結合された元のポイントです。親がない場合は、ブラウザの左上隅が原点になります

同時に、相対属性から[5]?? [5]は[3]の空間に対して相対的であることがわかります

実空間を占有するのではなく

[4]は絶対です

position:relative ??を設定する場合、ブラウザの左上隅が原点になります

さらに

TRBL属性(TOP、RIGHT、 BOTTOM 、 LEFT)、relative、absolute、および fix のみが有効です。それ以外の場合は、通常の HTML レイアウト規則に従い、オブジェクトは前のオブジェクトの直後にレンダリングされます。

Absolute は通常、ページが中央に表示される場合には使用されません。これは、拡大縮小するときに、Absolute がブラウザの左上隅を頂点として使用するためです。もちろん、親領域に固定して幅を固定することもできます。問題を解決します

[6] で使用されます。clip:rect(0px 50px 200px 0px); 領域をトリミングできます。

z-index、レイヤーの数を設定できます。高い値の要素は常に低い値の要素の上に表示されます。 -value 要素 [position 属性値のみが絶対、相対、または固定です]

声明

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

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

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ページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。