フロントエンド Web ページ レイアウトでは、同じ平面上にレイアウトする場合、Web ページ要素の位置を特定するために主に float 属性を使用します。しかし、ポップアップレイヤーやフローティングレイヤー、ページ広告プラグインなどは、どれもCSSで位置属性が必要であり、その位置が絶対値なのか相対値なのかが初心者にとっては不明瞭な場合が多いです。待ってください。初心者の役に立つことを願って、position 属性のこれら 3 つの値の基本的な使い方を簡単に紹介しましょう。
1. 位置の絶対配置
ここで、位置の絶対配置を 2 つのカテゴリに分けることができます:
A: Position:absolute は要素に対して定義されており、その親フレームは位置属性を定義しません。このときの絶対位置は、ブラウザの左上隅の 0 点を基準に位置が計算されるため、要素はドキュメント フローから独立します。スペースを占有します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。その位置は親フレームの影響を受けず、ページの端からのみ計算されます。コードは次のとおりです:
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>
効果は次のとおりです:
B: Position:absolute が要素に定義され、その親フレームがposition:absoluteposition:relativeposition:fixed属性を定義します。 。このときの絶対配置は、親フレームの端を基準にして配置されるため、要素はドキュメント フローから独立し、スペースを占有しません。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。その位置は親フレーム内でのみ変更されます。 コードは次のとおりです。
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; left:100px; top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:800px; height:800px; margin-left:150px; margin-top:50px; background:#000; position:relative}</style></head><body><div class="all"><div class="demo">position:absolute;<br />left:100px;<br />top:200px;<br /></div></div></body></html>
効果は以下のようになります
それで、ページ要素の位置を親フレーム内で定義したい場合は、要素の場合、モニターによって解決されません。レートやブラウザのウィンドウ サイズなどの制限がある場合は、オプション B を使用することをお勧めします。
2. 位置の相対配置
要素を相対的に配置すると、まずその位置に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対配置では、要素が移動されるかどうかに関係なく、要素は元のスペースを占有し続けます。したがって、要素を移動すると、要素は他のボックスを覆うことになります)。
relative は、それ自体に対して相対的に配置されます。親 DIV は、値を指定せずに、position:relative を設定します。
は、その子要素の参照として機能します。
3。は、本文を位置決めオブジェクトとして使用し、常に「left」、「top」、「right」、および「bottom」属性を使用して、ブラウザ ウィンドウに従って要素を配置します。
エディターの言語構成スキルはあまり良くないように思えます。
ドロップダウンの 2 番目のメニュー効果を作成する必要がある場合は、position:relative が必要です。親要素、およびその内部のドロップダウン要素には、position:absolute が必要です。
ページ上にフローティング広告を作成したり、ページの先頭に戻るボタンを作成する必要がある場合は、position:fixed が必要です。
通常、絶対位置決めレイアウトにはposition:absolute;position:relativeを使用し、CSS、DIVレイアウトHTMLを通じて位置決めを定義し、position:relativeが使用される場所と位置決めにposition:absoluteが使用される場所に注意してください。左、右、上、下の組み合わせを使用することを忘れないでください。特定の位置を特定します。絶対位置指定 親がposition:relativeを使用せず、直接position:absolute絶対位置指定を使用する場合、bodyタグが親として使用され、position:absoluteで定義されたオブジェクトが何層であってもドラッグアウトされます。
を親 (参照レベル) として絶対配置を実行します。絶対位置指定は非常に簡単に使用できますが、乱用してあらゆる場所で使用しないように注意してください。これにより、上下左右の間の距離を計算するのが面倒になり、CSS コードが肥大化する可能性があります。 . 適切に使用し、使用される場所で使用する方が実用的です。css z-index を使用して、絶対配置中に CSS レイヤーの重なり順を定義できます。
同時に、左、右、下、上の値については、(Photoshop) PS スライス ツールを使用して正確な値を取得できます。
最後に、エディターは、position:absolute 属性を使用して子 DIV を親 DIV に配置し、親 DIV が定義されていない場合 (親 DIV が埋められて占有されている場合) に注意してください。他の要素)、サブ DIV 定義も機能させる必要があります。現時点では、left、top、right、bottom を使用してサブ DIV を定義する必要はありません。margin-top と margin-left を使用できます。ただし、この方法は ie6/7 と ie8/9/10/11 では機能しません。ie6/7 では、css Hack を使用する必要があります。以下:
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:200px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS 配置position_html/css_WEB-ITnose" ><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>
効果は以下の通りです
使用CSS Hack之后 代码：
<!doctype html><html><head><meta charset="utf-8"><title>position</title><style type="text/css">.demo{position:absolute; margin-left:100px; margin-top:-400px;*margin-top:200px;*margin-left:-500px; background:#ff0000; color:#fff; text-align:center;width:300px; height:300px;}.all{width:600px; height:600px; margin-left:150px; margin-top:50px; background:#000;}</style></head><body><div class="all"><img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS 配置position_html/css_WEB-ITnose" ><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>
在各个版本的浏览器下的 效果如下
此种方法最好不要使用 在不同版本浏览器下需要来回的用CSS Hack调整！
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
