CSS_html/css_WEB-ITnose の絶対配置-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose の絶対配置

WBOY

リリース： 2016-06-24 12:31:12

オリジナル

1263 人が閲覧しました

CSS の絶対配置:
1. 基本概念:
相対配置がドキュメントフローから分離されておらず、オブジェクト自体に対する相対的なオフセットが少し混乱する場合は、絶対配置が間違いなく簡単な解決策です。 make a オブジェクトは通常のドキュメントフローから切り離され、通常のドキュメントフローの上に浮いているように見え、オブジェクトを含む要素に対して相対的に配置されます。もちろん、この要素に対する相対的な配置は状況によって異なります。
2. 要素を絶対配置に設定する方法:
次の属性をオブジェクトに追加して、オブジェクトを絶対配置に設定します:

position:absolute; 或者 position:fixed

ログイン後にコピー

3. 参照オブジェクトの配置:

top 属性を使用できます。および left 属性は、絶対的に配置されたオブジェクトのオフセットを設定します。
絶対配置はドキュメントフローから分離されていますが、配置のための参照オブジェクトも必要ですが、参照オブジェクトは状況によって異なります。
1. top または left 属性値が設定されていない場合、対応する方向の位置決め参照オブジェクトがこのオブジェクトの第 1 レベルの親要素になります。コード例は次のとおりです。上記コードでは、内部要素は絶対Positioningを使用しており、left属性値が設定されていないため、水平方向の位置決め参照オブジェクトは内部要素の第1レベルの親要素の子となります。もちろん、top 属性値が設定されていない場合、垂直位置の参照オブジェクトも子になります。
2. left または top 属性値が設定されている場合:

1) 祖先要素が位置決めを使用する場合、このオブジェクトの対応する方向の位置決め参照オブジェクトが祖先要素になります。対応する方向の位置決め参照オブジェクトはブラウザのクライアント領域です。コード例は次のとおりです:

例 1:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS的绝对定位-蚂蚁部落</title>  <style type="text/css"> body { margin:20px; } #grandfather { width:330px; height:300px; background-color:#F90; } #father { width:200px; height:200px; background-color:green; margin-left:50px; } #children { width:100px; height:100px; background-color:red; float:right; } #inner { width:50px; height:50px; background-color:blue; position:absolute; top:10px; } </style> </head> <body> <div id="grandfather"> <div id="father">   <div id="children">    <div id="inner"></div>   </div> </div> </div> </body> </html>

ログイン後にコピー

上記のコードでは、内部要素は絶対位置決めを採用し、その祖先要素の父親は相対位置決めを採用します。位置決め、その後その位置決め参照オブジェクトは父です。

例 2:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS的绝对定位-蚂蚁部落</title>  <style type="text/css"> body { margin:20px; } #grandfather { width:330px; height:300px; background-color:#F90; } #father { width:200px; height:200px; background-color:green; margin-left:50px; position:relative; } #children { width:100px; height:100px; background-color:red; float:right; } #inner { width:50px; height:50px; background-color:blue; position:absolute; left:10px; top:10px; } </style> </head> <body> <div id="grandfather"> <div id="father">   <div id="children">    <div id="inner"></div>   </div> </div> </div> </body> </html>

ログイン後にコピー

上記のコードでは、内部要素は絶対位置決めを使用し、その祖先要素は位置決めを使用しないため、left 属性値がであるため、垂直位置決めの参照オブジェクトはウィンドウになります。設定されていない場合、水平位置決め参照オブジェクトはその第 1 レベルの親要素の子になります。
4. 絶対配置された要素はドキュメントフローから切り離されます:

冒頭で述べたように、絶対配置により要素がドキュメントフローから切り離され、その周囲のドキュメントフロー内の要素がこの要素の位置を占めることができます。文書の流れから切り離されるわけではありません。

コード例は次のとおりです。

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS的绝对定位-蚂蚁部落</title>  <style type="text/css"> body { margin:20px; } #grandfather { width:330px; height:300px; background-color:#F90; } #father { width:200px; height:200px; background-color:green; margin-left:50px; } #children { width:100px; height:100px; background-color:red; float:right; } #inner { width:50px; height:50px; background-color:blue; position:absolute; top:10px; } </style> </head> <body> <div id="grandfather"> <div id="father">   <div id="children">    <div id="inner"></div>   </div> </div> </div> </body> </html>

ログイン後にコピー

上記のコードでは、最初の要素がドキュメントフローの外にあるため、2 番目の要素は、元の最初の要素が占めるべき位置を占めることができます。
特記事項: 位置指定された要素は、z-index 属性と一緒に使用されることがよくあります。詳細については、CSS での z-index 属性の使用法の詳細な説明を参照してください