ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS配置事例の考察（position属性の詳細説明）_html/css_WEB-ITnose
CSS配置事例の考察（position属性の詳細説明）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:33:531084ブラウズ
簡単な説明
初心者にとって CSS を学ぶのは常に困難な位置の問題です
位置の詳細な説明
CSS では、position 属性を使用して一緒に説明します。 top、right、left、buttom で要素を配置します。 static、relative、absolute、fixed の 4 つの位置属性があります。
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> .container { width: 400px; height: 400px; background-color: #DDDDDD; } .container div { border: 1px solid #F5F5F5; width: 100px; height: 100px; background-color: #06A7E1; } </style> <body> <div class="container"> <div class="x1">一</div> <div class="x2">二</div> <div class="x3">三</div> </div> </body></html>
効果:
1 行に 1 つのボックス。 、自動行折り返し相対配置相対
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> .container { width: 400px; height: 400px; background-color: #DDDDDD; } .container div { border: 1px solid #F5F5F5; width: 100px; height: 100px; background-color: #06A7E1; } .x1{ position: relative; top: 5px; left: 5px; } </style> <body> <div class="container"> <div class="x1">一</div> <div class="x2">二</div> <div class="x3">三</div> </div> </body></html>
要素ボックスは一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。絶対配置 絶対
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> .container { width: 400px; height: 400px; background-color: #DDDDDD; position: relative; } .container div { border: 1px solid #F5F5F5; width: 100px; height: 100px; background-color: #06A7E1; } .x1{ position: absolute; top: 50px; left: 50px; } </style> <body> <div class="container"> <div class="x1">一</div> <div class="x2">二</div> <div class="x3">三</div> </div> </body></html>
このとき、その要素が元の位置から解放された空間は、その相対位置が相対位置である親要素になります。ボディに対して相対的に配置固定配置固定
要素ボックスのパフォーマンスは、位置を絶対に設定するのと似ていますが、その位置は常にウィンドウを基準としており、固定ナビゲーション バーの効果を実現できます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。