css位置決め技術解析

6684 ワード

css 位置 position

css測位技術は,ウェブデザイン開発において重要な役割を果たす.多くのケースで使用できます.例えば、二級メニュー、弾窓、ピクチャーの放送などです.今、その使用をまとめてみます.
css位置決めプロパティはpositionで、次のようなプロパティ値があります.
1:static:(デフォルト)特別な配置はなく、オブジェクトは通常のドキュメントフローに従います.トップ,right,bottom,leftなどの属性は適用されません.
2:relative:オブジェクトは通常のドキュメントフローに従いますが、top、right、bottom、leftなどのプロパティに基づいて通常のドキュメントフローで位置をオフセットします.
3:absolute:オブジェクトは通常のドキュメントストリームから離れ、top、right、bottom、leftなどのプロパティを使用して絶対的に位置決めされます.その積層はz-index属性によって定義される.
4:fixed:オブジェクトは通常のドキュメントストリームから離れ、top、right、bottom、leftなどのプロパティを使用してウィンドウを参照点として位置決めされ、スクロールバーが表示されると、オブジェクトはスクロールされません.IE 6以下ではこのパラメータはサポートされていません
以下の点に注意してください.
1:relativeオブジェクトはドキュメントフローから離れません.relativeがその位置を平行移動しても、以前の位置では他の要素は現れません.relativeパンの参照オブジェクトの位置は、relative要素自体がパンされていない場合の位置です.
2:absoluteオブジェクトはドキュメントフローから離れ、absolute平行移動の参照オブジェクトの位置はstatic以外の最も近い親要素です.
3:fixedオブジェクトはドキュメントフローから離れ、fixed平行移動の参照オブジェクトの位置はwindowという要素(つまり、現在ウィンドウが表示されている)です.
以上の彼らの特徴と比較して、私たちは得ることができます.fixedという位置付けは、ウィンドウの位置(ウィンドウがドラッグされているかどうかにかかわらず)に要素を固定するためによく使われています.例えば、よく見られるページのそばのQQカスタマーサービス、現在のテレビウィンドウの中央弾き窓などです.absoluteは、よく見られる2級メニュー、ピクチャマルチキャストなど、要素の積層やcssアニメーションの実装によく使われています.次に、それらの使用例を説明します.

<!doctype html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Document</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="renderer" content="webkit|ie-comp|ie-stand">
 <meta name="keywords" content="">
 <meta name="description" itemprop="description" content="">
 <meta name="protocol" content="1">
 <meta itemprop="name" content="  ">
 <meta itemprop="image" content="http://9.url.cn/edu/img/logo_pc_rich.png"/>

 <style rel="stylesheet" type="text/css">
		*{margin:0px;padding:0px;font-family:"    ";font-size:12px;text-decoration:none;color:black;}
		.banner{width:98%;height:30px;margin:0 auto;border:1px solid red;position:fixed;top:5px;left:1%;}
		
		ul{list-style:none;height:100%;}
		ul li{float:left;width:100px;height:22px;line-height:22px;padding:4px 0;border-right: 1px solid gray ;position:relative;margin:0px;text-align:center;}
		ul li div{width:100px;position:absolute;top:100%;left:-1px;border:1px solid gray;border-top:0;display:none;}
		ul li:hover{background:red;}
		ul li:hover div{display:block;}

		ul li div span{display:block;width:100%;height:22px;line-height:22px;text-align:center;border-top:1px solid gray;}
		ul li div span a{display:block;width:100%;height:100%;}
		ul li div span:hover{background:red;cursor:pointer;}
		
 </style>
 </head>
 <body>
		<div class="banner" id="header">
			<ul>
				<li>
					<a href="javasript:;">  </a>
					<div class="b_menu">
						<span><a  href="javasript:;">  </a></span>
						<span><a  href="javasript:;">  </a></span>
						<span><a  href="javasript:;">  </a></span>
						<span><a  href="javasript:;">  </a></span>
					</div>
				</li>
				<li>
					<a  href="javasript:;">  </a>
					<div class="b_menu">
							<span><a  href="javasript:;">  </a></span>
							<span><a  href="javasript:;">  </a></span>
							<span><a  href="javasript:;">  </a></span>
					</div>
				</li>
				<li>
					<a  href="javasript:;">  </a>
					<div class="b_menu">
							<span><a  href="javasript:;">  </a></span>
							<span><a  href="javasript:;">  </a></span>
					</div>
				</li>
			</ul>
		</div>

		<div>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>

			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>


			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>

			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>

		</div>
 </body>
</html>

ここで、ウィンドウがずっとドロップダウンされている間、メニューバーが常にトップに表示されます.キーコードは次のとおりです.

.banner{width:98%;height:30px;margin:0 auto;border:1px solid red;position:fixed;top:5px;left:1%;}

のfiexed位置決めとtop,leftのプロパティの設定を行います.
二次メニューのキーコードは次のとおりです.

ul li{float:left;width:100px;height:22px;line-height:22px;padding:4px 0;border-right: 1px solid gray ;position:relative;margin:0px;text-align:center;}
		ul li div{width:100px;position:absolute;top:100%;left:-1px;border:1px solid gray;border-top:0;display:none;}

中ulliのrelative位置決めとulli divのabsolute位置決め.ここでのabsoulteの位置決めはulliに対してであることに注意してください.

cssウェイトの簡単なまとめ

WPFエッセイ(五)--HttpClientサードパーティWebAPIインタフェースへのアクセス