ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose の絶対配置
CSS_html/css_WEB-ITnose の絶対配置
- WBOYオリジナル
- 2016-06-24 12:31:121254ブラウズ
CSS の絶対配置:
1. 基本概念:
相対配置がドキュメント フローから分離されておらず、オブジェクト自体に対する相対的なオフセットが少し混乱する場合は、絶対配置が間違いなく簡単な解決策です。 make a オブジェクトは通常のドキュメント フローから切り離され、通常のドキュメント フローの上に浮いているように見え、オブジェクトを含む要素に対して相対的に配置されます。 もちろん、この要素に対する相対的な配置は状況によって異なります。
2. 要素を絶対配置に設定する方法:
次の属性をオブジェクトに追加して、オブジェクトを絶対配置に設定します:
position:absolute; 或者 position:fixed
3. 参照オブジェクトの配置:
top 属性を使用できます。および left 属性は、絶対的に配置されたオブジェクトのオフセットを設定します。
絶対配置はドキュメント フローから分離されていますが、配置のための参照オブジェクトも必要ですが、参照オブジェクトは状況によって異なります。
1. top または left 属性値が設定されていない場合、対応する方向の位置決め参照オブジェクトがこのオブジェクトの第 1 レベルの親要素になります。 コード例は次のとおりです。上記コードでは、内部要素は絶対Positioningを使用しており、left属性値が設定されていないため、水平方向の位置決め参照オブジェクトは内部要素の第1レベルの親要素の子となります。もちろん、top 属性値が設定されていない場合、垂直位置の参照オブジェクトも子になります。
2. left または top 属性値が設定されている場合:
例 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 属性の使用法の詳細な説明を参照してください