ホームページ > 記事 > ウェブフロントエンド > CSS 位置attribute_html/css_WEB-ITnose
CSS 位置attribute_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:34:071343ブラウズ
position 属性の定義と使用法:
オブジェクトの位置決め方法を取得または設定します。
周囲のコンテンツのレイアウトに関係なく、オブジェクトを通常のドキュメント フローの外にドラッグするには、このプロパティ値を絶対に設定します。異なる Z インデックス プロパティを持つ他のオブジェクトがすでに特定の位置を占めている場合、それらは互いに影響を与えず、同じ位置で重なり合います。この時点では、オブジェクトにはマージンはありませんが、パディングとボーダーはまだあります。
オブジェクトの絶対配置を有効にするには、この属性の値を絶対に設定するだけでなく、left、right、top、bottom 属性のうち少なくとも 1 つを指定する必要があります。それ以外の場合、上記のプロパティはデフォルト値の auto を使用し、オブジェクトは通常の HTML レイアウト ルールに従い、前のオブジェクトの直後にレンダリングされます。
オブジェクトを通常の HTML フロー内に維持するには、この属性値を相対値に設定しますが、オブジェクト自体の元の位置に従ってオフセットします。相対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトの自然なスペースを上書きすることなく、独自のスペースを占有します。対照的に、絶対的に配置されたオブジェクトに続くテキストまたはオブジェクトは、配置されたオブジェクトが通常のドキュメント フローからドラッグされるまで、その自然なスペースを占めます。絶対に配置されたオブジェクトを表示領域の外側に配置すると、スクロール バーが表示されます。ただし、相対的に配置されたオブジェクトが表示領域外に配置されている場合、スクロール バーは表示されません。
対応するスクリプト機能は位置です。
構文構造:
position：static | relative | absolute | fixed
値:
静的: 特別な配置はなく、オブジェクトは通常のドキュメント フローに従います。上、右、下、左などの属性は適用されず、デフォルト値が適用されます。
relative: オブジェクトは通常のドキュメント フローに従いますが、上、右、下、左、その他の属性に基づいて通常のドキュメント フロー内でオフセットされます。
absolute: オブジェクトは通常のドキュメント フローから分離されており、上、右、下、左、およびその他の属性を使用して絶対位置を決定します。そして、そのカスケードは 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 位置属性の章です。