CSS 位置プロパティ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS 位置プロパティ_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

position 属性の定義と使用法:
オブジェクトの配置方法を取得または設定します。
周囲のコンテンツのレイアウトに関係なく、オブジェクトを通常のドキュメントフローの外にドラッグするには、このプロパティ値を絶対に設定します。異なる Z インデックスプロパティを持つ他のオブジェクトがすでに特定の位置を占めている場合、それらは互いに影響を与えず、同じ位置で重なり合います。この時点では、オブジェクトにはマージンはありませんが、パディングとボーダーはまだあります。
オブジェクトの絶対配置を有効にするには、この属性の値を絶対に設定するだけでなく、left、right、top、bottom 属性のうち少なくとも 1 つを指定する必要があります。それ以外の場合、上記のプロパティはデフォルト値の auto を使用し、オブジェクトは通常の HTML レイアウトルールに従い、前のオブジェクトの直後にレンダリングされます。
オブジェクトを通常の HTML フロー内に維持するには、この属性値を相対値に設定しますが、オブジェクト自体の元の位置に従ってオフセットします。相対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトの自然なスペースを上書きすることなく、独自のスペースを占有します。対照的に、絶対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトが通常のドキュメントフローからドラッグされるまで、その自然なスペースを占めます。絶対に配置されたオブジェクトを表示領域の外側に配置すると、スクロールバーが表示されます。ただし、相対的に配置されたオブジェクトが表示領域外に配置されている場合、スクロールバーは表示されません。
対応するスクリプト機能は位置です。
構文構造:

position：static | relative | absolute | fixed

ログイン後にコピー

値:
静的: 特別な配置はなく、オブジェクトは通常のドキュメントフローに従います。上、右、下、左などの属性は適用されず、デフォルト値が適用されます。
relative: オブジェクトは通常のドキュメントフローに従いますが、上、右、下、左、その他の属性に基づいて通常のドキュメントフロー内でオフセットされます。
絶対: オブジェクトは通常のドキュメントフローから分離されており、上、右、下、左、およびその他の属性を使用して絶対位置を決定します。そして、そのカスケードは z-index 属性によって定義されます。
修正: オブジェクトは通常のドキュメントフローから分離されており、上、右、下、左などの属性を使用してウィンドウを基準点として配置します。スクロールバーが表示されると、オブジェクトは一緒にスクロールしません。 IE6 はこの属性値をサポートしていません。
ブラウザのサポート:
IE ブラウザはこの属性をサポートしています。
Firefox はこのプロパティをサポートしています。
Google Chrome はこの属性をサポートしています。
opera ブラウザはこの属性をサポートしています。
注: IE6 は固定属性値をサポートしていません。
継承:
継承はありません。
コード例:
例 1:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position属性-蚂蚁部落</title><style type="text/css">.mytest{  width:200px;  height:100px;  border:1px solid blue;  position:static;  top:40px;}</style></head><body>  <div class="mytest">蚂蚁部落欢迎您</div></body></html>

ログイン後にコピー

static は特別な配置を持たないオブジェクトのデフォルトの配置値であるため、top 属性は無視されます。
例 2:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position属性-蚂蚁部落</title><style type="text/css">.parent{  width:300px;  height:300px;  border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:relative;  top:30px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="parent">  <div class="first">我是第一个孩子</div>  <div class="second">我是第二个孩子</div></div></body></html>

ログイン後にコピー

最初のオブジェクトは相対的に配置され、そのオブジェクトが相対する要素はそれ自体の位置です。 2 番目のオブジェクトは最初のオブジェクトの影響を受けず、元の場所に残ります。
例 3:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>position属性-蚂蚁部落</title><style type="text/css">.grandfather{  width:400px;  height:400px;  border:1px solid green;  position:relative;}.parent{  width:300px;  height:300px;  border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:absolute;  bottom:50px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="grandfather">  <div class="parent">    <div class="first">我是第一个孩子</div>    <div class="second">我是第二个孩子</div>  </div></div></body></html>

ログイン後にコピー

次のコードは、絶対位置オブジェクトの参照オブジェクトがすべての本体またはその最も近い親オブジェクトではなく、位置属性と属性値を持つ最も近い親が静的オブジェクトではないことを示しています。。以下の最初のオブジェクトは、祖父をオフセット参照オブジェクトとして使用します。
例 4:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>密码强度提示功能-蚂蚁部落</title><style type="text/css">.grandfather{  width:400px;  height:400px;  border:1px solid green;  position:relative;}.parent{   width:300px;   height:300px;   border:1px solid #606;}.first{  width:100px;  height:100px;  border:1px solid blue;  position:fixed;  bottom:50px;}.second{  width:100px;  height:100px;  border:1px solid #606;}</style></head><body><div class="grandfather">  <div class="parent">    <div class="first">我是第一个孩子</div>    <div class="second">我是第二个孩子</div>  </div></div></body></html>

ログイン後にコピー

postion の固定位置では、常にボディがオフセット参照オブジェクトとして使用されます。

元のアドレスは、CSS 位置属性の章です。

このウェブサイトの声明

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