回転absoluteとrelativeの運用

4042 ワード

Div+CSS Webレイアウト3ページCSS floatメソッド

Div+CSSはウェブレイアウトを行い、absoluteとrelativeを適切に運用することで、レイアウトに予想外の効果と便利さをもたらし、仕事の半分に達することができます...absoluteとrelativeの運用について紹介しました.両者の関係を詳しく説明するには、例に合わせる必要があります.まず例を見てください.以下は引用クリップです.

<html xmlns="http://www.w3.or g/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">
<!--
body,td,th{font-family:Ver dana;font-size:9px;}
-->
</style></head>
<body>
<div style="position:absolute; top:5px; r ight:20px; width:200px; height:180px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　r ight: 20px;<br />
　<div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
left: 20px;<br />
bottom: 10px;<br />
</div>
</div>
<div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　left: 5px;<br />
</div>
<div style="position:relative ; left:150px; width:300px; height:50px; background:#FF9933;">
　position: relative ;<br />
　left: 150px;<br />
　<br />
　width: 300px; height: 50px; <br />
</div>
<div style="text-align:center ; background:#ccc;">
　　<div style="mar gin:0 auto; width:600px; background:#FF66CC; text-align:left;">
　 <p>1</p>
　 <p>2</p>
　 <p>3</p>
　 <p>4</p>
　 <p>5</p>
　 <div style="padding:20px 0 0 20px; background:#FFFF00;">
　　　 padding: 20px 0 0 20px;
　　<div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color :#fff; ">absolute</span>;</div>
　　<div style="position:relative ; left:200px; width:500px; height:300px; background:#FF9933;">
　　　　position: <span style="color :blue;">relative </span>;<br />
　　 left: 200px;<br />
　　 <br />
　　 width: 500px;<br />
　　 height: 300px;<br />
　　 <div style="position:absolute; top:20px; r ight:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　　 top: 20px;<br />
　　　 r ight: 20px;<br /></div>
　　 <div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　bottom: 20px;<br />
　　left: 20px;<br />
　　</div>
　　</div>
　 </div>
　
</div>
</div>
</body>
</html>

absolute:絶対位置決め、CSS表記「position:absolute;」,その位置決めは2つの状況に分けられ、以下の通りである:1.Top、R ight、Bottom、Leftが設定されていない場合、デフォルトでは親の「コンテンツ領域の元の点」が元の点であり、上記の例の赤い部分(親の黄色領域にはPadding属性があり、「座標の元の点」と「コンテンツ領域の元の点」は異なる).　　2. Top,R ight,Bottom,Leftを設定場合があるが,ここでは,(1)の2つに分けられる.親にはposition属性がなく、ブラウザの左上隅(すなわちBody)は「座標の元の点」として位置決めされ、位置はTop、R ight、Bottom、Left属性によって決定され、上記の例の緑色部分である.　　(2). 親にはpositionプロパティがあり、親の[座標の元の点](Coordinate Original Points)は元の点であり、上記の例では水色の部分があります.relative:相対位置、CSS表記「position:relative;」親の「コンテンツ領域の元の点」を元の点とし、親がいない場合はBodyの「コンテンツ領域の元の点」を元の点とし、位置はTop、R ight、Bottom、Left属性によって決定され、上の例のオレンジ色の部分を「開くか占有するか」の役割を果たす.上記の例と説明を通じて、absoluteとrelativeを上手に運用することは難しくないと信じています.私たちの周りにはabsoluteとrelativeに関する良い例がたくさんあります.例えば、「網易163無料メール」のトップページ(http://mail.163.com)、中には大量の運用があります.例コードはIE 5にある.5、IE6、FF1.5、Opera 9テストに合格した.

IE 6でCSSのBUG~被害は惨め

フロントエンドコードガイド(一)