|
源代码网推荐
1. position:static|鏃犲畾浣�
position:static鏄墍鏈夊厓绱犲畾浣嶇殑榛樿鍊�, 涓�鑸笉鐢ㄦ敞鏄庯紝闄ら潪鏈夐渶瑕佸彇娑堢户鎵跨殑鍒殑瀹氫綅
example:
#div-1 {
position:static;
}
2. position:relative|鐩稿瀹氫綅
浣跨敤position:relative锛屽氨闇�瑕乼op,bottom,left,right4涓睘鎬ф潵閰嶅悎锛岀‘瀹氬厓绱犵殑浣嶇疆銆�
濡傛灉瑕佽div-1灞傚悜涓嬬Щ鍔�20px,宸︾Щ40px:
example:
#div-1 {
position:relative;
top:20px;
left:40px;
}
濡傛灉鐢ㄥ埌鐩稿瀹氫綅锛岀揣闅忎粬鐨勫眰divafter鏄笉浼氬嚭鐜板湪div-1鐨勪笅鏂癸紝鑰屾槸鍜宒iv-1鍦ㄥ悓涓�涓珮搴﹀嚭鐜般��
鍙锛� position:relative;骞朵笉鏄緢濂界敤銆�
3. position:absolute|缁濆瀹氫綅
浣跨敤position:absolute;,鑳藉寰堝噯纭殑灏嗗厓绱犵Щ鍔ㄥ埌浣犳兂瑕佺殑浣嶇疆锛�
璁╂垜灏� div-1a 绉诲姩鍒伴〉闈㈢殑鍙充笂瑙�:
example:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
浣跨敤缁濆瀹氫綅鐨刣iv-1a灞傚墠闈㈢殑鎴栬�呭悗闈㈢殑灞備細璁や负杩欎釜灞傚苟涓嶅瓨鍦紝涓濇涓嶅奖鍝嶅埌浠栦滑銆傛墍浠osition:absolute;鐢ㄤ簬灏嗕竴涓厓绱犳斁鍒板浐瀹氱殑浣嶇疆寰堝ソ鐢紝浣嗘槸濡傛灉闇�瑕乨iv-1a灞傜浉瀵逛簬闄勮繎鐨勫眰鏉ョ‘瀹氫綅缃氨涓嶈瀹炵幇浜嗐��
*杩欓噷鏈変釜Win IE鐨刡ug闇�瑕佹彁鍒帮紝灏辨槸濡傛灉涓虹粷瀵瑰畾浣嶇殑鍏冪礌瀹氫箟涓�涓浉瀵圭殑瀹藉害锛岄偅涔堝湪IE涓嬪畠鐨勫搴﹀彇鍐充簬鐖跺厓绱犵殑瀹藉害鑰屼笉鏄暣涓〉闈㈢殑瀹藉害銆�
4. position:relative + position:absolute|缁濆瀹氫綅+鐩稿瀹氫綅
濡傛灉缁欑埗鍏冪礌(div-1)瀹氫箟涓簆osition:relative;瀛愬厓绱�(div-1a)瀹氫箟涓簆osition:absolute锛岄偅涔堝瓙鍏冪礌(div-1a)鐨勪綅缃皢鐩稿浜庣埗鍏冪礌(div-1)锛岃�屼笉鏄暣涓〉闈€��
璁ヾiv-1a瀹氫綅浜巇iv-1鐨勫彸涓婅锛�
example:
<div id="div-1">
<div id="div-1a">
this is div-1a element.
</div>
this is div-1 element.
</div>
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
5. two column layout|涓ゅ垪甯冨眬
璁╂垜浠疄璺祊osition:relative + position:absolute鐨勭悊璁猴紝瀹炵幇涓ゅ垪甯冨眬銆�
example:
<div id="div-1">
<div id="div-1a">this is the column-one</div>
<div id="div-1b">this is the column-two</div>
</div>
#div-1 {
position:relative;/*鐖跺厓绱犵浉瀵瑰畾浣�*/
}
#div-1a {
position:absolute;/*瀛愬厓绱犵粷瀵瑰畾浣�*/
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;/*瀛愬厓绱犵粷瀵瑰畾浣�*/
top:0;
left:0;
width:200px;
}
娉ㄦ剰锛屽湪杩欎釜渚嬪瓙涓細鍙戠幇鐖跺厓绱犵殑鍛婅瘔涓嶄細闅忕潃瀛愬厓绱犵殑鍛婅瘔鍙樺寲锛屾墍浠ュ鏋滅埗鍏冪礌鐨勮儗鏅拰杈规闇�瑕佸畾涔変竴涓冻澶熼珮鐨勯珮搴︽墠鑳芥樉绀哄嚭鏉ャ��
6.float|娴姩瀵归綈
浣跨敤float瀹氫綅涓�涓厓绱犳湁float:left;&float:right;涓ょ鍊笺�傝繖绉嶅畾浣嶅彧鑳藉湪姘村钩鍧愭爣瀹氫綅锛屼笉鑳藉湪鍨傜洿鍧愭爣瀹氫綅銆傝�屼笖璁╀笅闈㈢殑鍏冪礌娴姩鐜粫鍦ㄥ畠鐨勫乏杈规垨鑰呭彸杈广��
example:
#div-1a {
float:left;
width:200px;
}
7.make two clumn with float|娴姩瀹炵幇涓ゅ垪甯冨眬
濡傛灉璁╀竴涓厓绱爁loat:left;鍙︿竴涓猣loat:right;鎺у埗濂戒粬浠殑瀹藉害锛屽氨鑳藉疄鐜颁袱鍒楃殑甯冨眬鏁堟灉銆�
example:
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
8.clear float|娓呴櫎娴姩
濡傛灉浣犱笉鎯宠浣跨敤浜唂loat鍏冪礌鐨勪笅闈㈢殑鍏冪礌娴姩鐜粫鍦ㄥ畠鐨勫懆鍥达紝閭ｄ箞浣犲氨浣跨敤clear,clear鏈変笁涓�硷紝clear:left;(娓呴櫎宸︽诞鍔�)锛宑lear:right;(娓呴櫎鍙虫诞鍔�)锛宑lear:both;(娓呴櫎鎵�鏈夋诞鍔�)銆�
example:
<div id="div-1a">this is div-1a</div>
<div id="div-1b">this is div-1b</div>
<div id="div-1c">this is div-1c</div>
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
鑷虫锛岃繖涓猚ss鐨勫畾浣嶉儴鍒嗗氨缁撴潫浜嗭紝浣犲彲浠ュ姩鎵嬩綋浼氫綋浼氬姞娣卞嵃璞°��
2006-07-04 update
z-index : auto | number
鐢ㄤ簬璁剧疆鐩稿鍜岀粷瀵瑰畾浣嶅厓绱犵殑"鍐呭"浣嶇疆,鏁板�艰秺灏忕殑鍦ㄦ渶鍐呭眰,澶栧眰鐨勫皢瑕嗙洊鍐呭眰.
Eg.
E { position:absolute; z-index:3; width:6px; }
鏌ョ湅瀹炰緥
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>greengnn's space | web design :: web develop :: web standard</title>
<style type="text/css">
*{font-size:11px;font-family:verdana,tahoma;}
#idParentDiv{width:50%;height:120px;padding:6px;background-color:#666;position:relative;}
#idDiv1{width:160px;height:80px;background-color:#F60;padding:6px;position:absolute;left:9px;top:9px;z-index:6;}
#idDiv2{width:120px;height:80px;background-color:#f00;padding:6px;position:absolute;right:9px;bottom:9px;z-index:4;}
#idDiv3{width:140px;height:80px;background-color:#fff;padding:6px;position:absolute;left:150px;top:25px;z-index:5;}
#idCodeDiv{width:100%;padding:4px;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-family:Courier New;}
</style>
</head>
<body>
<div id="idParentDiv">
<div id="idDiv1"><img src="http://www.blogbus.com/images/site-v3/1kg_logo.gif" style="border:1px solid #FFFFFF;"/><br/>z-index : 6 ; </div>
<div id="idDiv2"><img src="http://www.blogbus.com/images/site-v3/1kg_logo.gif" style="border:1px solid #FFFFFF;"/><br/>z-index : 4 ; </div>
<div id="idDiv3"><img src="http://www.blogbus.com/images/site-v3/1kg_logo.gif" style="border:1px solid #FFFFFF;"/><br/>z-index : 5 ; </div>
</div>
</body>
</html>
源代码网供稿. | 
