CSS 配置position_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS 配置position_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:55 AM

フロントエンド 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="1.jpg" width="600" height="600" /><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="1.jpg" width="600" height="600" /><div class="demo">position:absolute;<br />margin-left:100px;<br />margin-top:200px;<br /></div></div></body></html>

ログイン後にコピー

在各个版本的浏览器下的效果如下

此种方法最好不要使用在不同版本浏览器下需要来回的用CSS Hack调整！

このウェブサイトの声明

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