在html中，如何让一张图片绝对定位到页面的右下角；position:absolute;该怎么用！谢谢啊，急求!!! css div中定位右下角
\u5728html\u4e2d\uff0c\u5982\u4f55\u8ba9\u4e00\u5f20\u56fe\u7247\u7edd\u5bf9\u5b9a\u4f4d\u5230\u9875\u9762\u7684\u53f3\u4e0b\u89d2\uff1bposition:absolute;\u8be5\u600e\u4e48\u7528\uff01\u8c22\u8c22\u554a\uff0c\u6025\u6c42!!!position:absolute; bottom:0; right:0;
\u8fd9\u6837\u5c31\u53ef\u4ee5\u4e86\uff0c\u4e0d\u8fc7\u5c4f\u5e55\u6eda\u52a8\u7684\u8bdd\uff0c\u5143\u7d20\u4e0d\u4f1a\u968f\u7740\u5c4f\u5e55\u6eda\u52a8\u800c\u4e00\u76f4\u5728\u53f3\u4e0b\u89d2
position:fixed; bottom:0; right:0;
\u8fd9\u6837\u53ef\u4ee5\u4e00\u76f4\u4fdd\u6301\u5728\u53f3\u4e0b\u89d2\uff0c\u4f46IE6\u4e0d\u652f\u6301
\u5982\u679c\u60f3\u8981IE6\u4e5f\u652f\u6301\uff0c\u53ea\u80fd\u7528js\u6765\u63a7\u5236
1\u3001\u9996\u5148\u6211\u4e0d\u7ed9div\u5b9a\u4f4d\u6765\u770b\u770b\u4e24\u4e2adiv\u5728\u6d4f\u89c8\u5668\u4e2d\u662f\u5982\u4f55\u663e\u793a\u7684\uff0c\u5177\u4f53\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
\u5982\u4e0b\u56fe\uff0c\u53ef\u4ee5\u770b\u5230\u4e24\u4e2adiv\u5728\u6ca1\u4f7f\u7528\u5b9a\u4f4d\u7684\u60c5\u51b5\u4e0b\u663e\u793a\u7684\u4f4d\u7f6e\uff0c\u6211\u4eec\u53ef\u4ee5\u53d1\u73b0div\u662f\u4e2a\u5757\uff0c\u81ea\u52a8\u6362\u884c\u4e86\u3002
2\u3001\u76f8\u5bf9\u5b9a\u4f4d\uff1a\u9996\u5148\u7ed9div2\u4f7f\u7528\u76f8\u5bf9\u5b9a\u4f4d\uff0c\u7528position:relative;\u6765\u5b9e\u73b0\u7684\uff0c\u5177\u4f53\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
\u53ef\u4ee5\u770b\u5230\u5982\u4e0b\u56fe\uff0cdiv2\u7684\u4f4d\u7f6e\u79bbdiv1\u7684\u4f4d\u7f6e\u504f\u79fb\u4e86\u4e0a\u8fb9\u56db\u5341\u4e2a\u50cf\u7d20\uff0c\u5de6\u8fb9\u56db\u5341\u4e2a\u50cf\u7d20\u3002
3\u3001\u7edd\u5bf9\u5b9a\u4f4d\uff1a\u73b0\u5728\u6765\u770b\u770b\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u4f7f\u5f97div1\u548cdiv2\u80fd\u91cd\u53e0\uff0c\u5177\u4f53\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
\u5982\u4e0b\u56fe\u662f\u4e0d\u662f\u53d1\u73b0\u4e24\u4e2adiv\u5757\u91cd\u53e0\u4e86\uff0c\u5177\u4f53\u7684\u6548\u679c\u5982\u4e0b\u56fe\u3002
4\u3001\u7edd\u5bf9\u5b9a\u4f4d\uff1a\u73b0\u5728\u6211\u6765\u4f7f\u5f97div1\u7684\u7edd\u5bf9\u5b9a\u4f4d\u8fb960px\uff0c\u5de6\u8fb960px\uff0c\u770b\u770b\u6267\u884c\u7684\u6548\u679c\u662f\u4ec0\u4e48\u6837\u5b50\u5462\uff1f\u5177\u4f53\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
\u53ef\u4ee5\u770b\u5230\u5982\u4e0b\u56fe\u7684\u6267\u884c\u6548\u679c\uff0c\u662f\u4e0d\u662f\u5f97\u51fa\u4e86\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5b9a\u4f4d\u70b9\u662f\u6d4f\u89c8\u5668\u5de6\u4e0a\u89d2\u5750\u6807\u70b9\u4e3a(0,0)\u8fd9\u4e2a\u50cf\u7d20\u70b9\u4e3a\u8d77\u70b9\u7684\u3002
5\u3001div\u5757\u52a0\u6587\u5b57P:\u8fd9\u91cc\u4e3a\u4e86\u8bf4\u660e\u4e0b\u4e2a\u5b9a\u4f4d\u76f8\u5173\u7684\u77e5\u8bc6\uff0c\u6211\u5148\u505a\u5982\u4e0b\u7684\u6a21\u578b\uff0c\u5177\u4f53\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
\u5982\u4e0b\u56fe\u53ef\u4ee5\u770b\u5230\u6587\u5b57\u5728div\u5757\u4e2d\uff0c\u90a3\u4e48\u6211\u4eec\u8be5\u5982\u4f55\u4f7f\u5f97div\u4e2d\u6587\u5b57\u603b\u662f\u5728div\u5757\u4e2d\u5462,\u8fd9\u91cc\u8bf4\u7684\u662f\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u7684\u60c5\u51b5\u4e0b\u3002
6\u3001div\u548c\u6587\u5b57\uff1a\u5c06div\u5757\u8bbe\u7f6e\u6210\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u770b\u770b\u6587\u5b57\u663e\u793a\u7684\u4f4d\u7f6e\uff0c\u5177\u4f53\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
\u5982\u4e0b\u56fe\uff0c\u662f\u4e0d\u662f\u53d1\u73b0\u6587\u5b57\u6ca1\u6709\u5728div\u5757\u4e2d\u4e86\u3002
7\u3001div\u7edd\u5bf9\u5b9a\u4f4d\u4e0b\u5757\u4e2d\u7684\u6587\u5b57\uff1a\u8fd9\u91cc\u6211\u8981\u5b9e\u73b0div\u5728\u7edd\u5bf9\u5b9a\u5b9a\u4f4d\u4e0b\uff0cdiv\u4ee5\u53ca\u80fd\u5728\u5757\u4e2d\uff0c\u5177\u4f53\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
\u4e0a\u9762\u76f8\u5bf9\uff0c\u4e0b\u9762\u7edd\u5bf9\uff0c\u5177\u4f53\u7684\u663e\u793a\u6548\u679c\u5982\u4e0b\u56fe\u3002
然后图片这个层postion:absolute;right:0px;bottom:0px;就OK了！
<body position:relative;>
<img postion:absolute;right:0px;bottom:0px; />
</body>
绛旓細鍦╤tml涓緭鍏ワ紝position:absolute; bottom:0; right:0;杩欐牱灏卞彲浠ヤ簡锛屼笉杩囧睆骞曟粴鍔ㄧ殑璇濓紝鍏冪礌涓嶄細闅忕潃灞忓箷婊氬姩鑰屼竴鐩村湪鍙充笅瑙抪osition:fixed; bottom:0; right:0;杩欐牱鍙互涓鐩翠繚鎸佸湪鍙充笅瑙掞紝浣咺E6涓嶆敮鎸侊紝濡傛灉鎯宠IE6涔熸敮鎸侊紝鍙兘鐢╦s鏉ユ帶鍒躲傝秴鏂囨湰鏍囪璇█锛屾爣鍑嗛氱敤鏍囪璇█涓嬬殑涓涓簲鐢ㄣ傗滆秴鏂囨湰...
绛旓細position:absolute; bottom:0; right:0;杩欐牱灏卞彲浠ヤ簡锛屼笉杩囧睆骞曟粴鍔ㄧ殑璇濓紝鍏冪礌涓嶄細闅忕潃灞忓箷婊氬姩鑰屼竴鐩村湪鍙充笅瑙 position:fixed; bottom:0; right:0;杩欐牱鍙互涓鐩翠繚鎸佸湪鍙充笅瑙掞紝浣咺E6涓嶆敮鎸 濡傛灉鎯宠IE6涔熸敮鎸侊紝鍙兘鐢╦s鏉ユ帶鍒
绛旓細浠ヤ笅鏄叿浣撶殑姝ラ锛氶鍏堬紝浣犻渶瑕佺殑鍩烘湰宸ュ叿鏄數鑴戙佹祻瑙堝櫒鍜HTML缂栬緫鍣ㄣ傛墦寮浣犵殑HTML缂栬緫鍣紝姣斿Notepad++鎴朧isualStudioCode锛岀劧鍚庡紑濮嬪垱寤涓涓鏂扮殑HTML鏂囦欢锛屼緥濡傚懡鍚嶄负"index.html"銆傚湪"index.html"鐨勬簮浠ｇ爜涓紝瀹氫綅鍒版爣绛撅紝杩欐槸缃戦〉鐨勪富瑕佸唴瀹瑰尯鍩熴傛帴涓嬫潵锛屼綘闇瑕佹彃鍏鍥剧墖銆傚湪鏍囩鍐咃紝娣诲姞濡備笅浠ｇ爜锛...
绛旓細01鎵撳紑璁颁簨鏈垨鍏朵粬浠ｇ爜缂栬緫鍣紝鍒涘缓涓涓鏂扮殑HTML鏂囦欢锛屽涓嬪浘鎵绀 02鐢ㄦ祻瑙堝櫒鎵撳紑杩欎釜HTML鏂囦欢锛屽彲浠ョ湅鍒颁笅鍥炬墍绀虹殑鏁堟灉銆傝繖骞呯敾鍦ㄦ暣椤电殑宸﹁竟銆03鍥剧墖灞呬腑鍙互閫氳繃HTML涓鐨刟lign灞炴ф潵鎺у埗銆鍦ㄥ浘鐗鐨刣iv涓坊鍔燼lign="center"銆04鍦ㄦ祻瑙堝櫒涓啀娆℃墦寮杩欎釜椤甸潰鏂囦欢锛屾晥鏋滃涓嬨傚浘鐗囧凡缁忔樉绀哄湪涓棿銆05鎴戜滑杩...
绛旓細閽堝浣犵殑鏈澶栭潰閭ｄ釜灞傚仛瀹氫綅position:relative;鐒跺悗鍥剧墖杩欎釜灞俻ostion:absolute;right:0px;bottom:0px;灏監K浜嗭紒
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛屽～鍐欓棶棰樺熀纭浠ｇ爜銆2銆佸湪index.html涓鐨<body>鏍囩涓紝灏<img>鏍囩璋冩暣涓猴細<div style="text-align:center"><img src="small.png" /></div>銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鍥剧墖...
绛旓細璁剧疆浠ラ噸澶嶇殑鏂瑰紡濉弧椤甸潰(浠ュ強鏄惁骞抽摵銆佷綍绉嶆柟寮忓钩閾)锛歜ackground-repeat: no-repeat;锛堥粯璁epeat浠ラ噸澶嶆樉绀哄浘鐗囩殑鏂瑰紡閾烘弧椤甸潰銆乶o-repeat涓嶅钩閾猴級浠涓寮犲浘鐗涓嶉噸澶嶏紝浠ユ媺浼哥殑鏂瑰紡濉弧椤甸潰锛夛細background-size: cover;
绛旓細src="2008081801331242.gif" width="300" height="300" alt="鎴戞槸鍥剧墖鍝!"/>杩樻湁鍔犱笂alt娉ㄩ噴浜!璁╁浘鐗灞涓.鏄鍥剧墖鍦ㄤ粈涔堝湴鏂瑰眬涓摝! 浣犲彲浠ョ敤<div align="center">...</div> 鐢<p align="center"> 鐢<td align="center"></td>閮藉彲浠ョ殑.鍛靛懙.娆㈣繋閲囩撼.鏈変粈涔堜笉鎳傜殑鍐嶉棶鎴戝摝!
绛旓細妤间笂鐨勮绠鍗曪紵鎴戞庝箞涔熸病鐪嬫槑鐧.A瑕佸眳涓.B鍛㈣鍦ˋ鐨勬梺杈.涔熷氨鏄A杩樿涓ユ牸灞呬腑路濡傛灉鏄疉B涓琛屽唴灞呬腑鍊掑ソ寮劼蜂絾鏄A灞呬腑路B闈燗鐨勮瘽路杩欎釜鐪熸湁鐐归棶棰樎峰彧鑳界敤娴姩瀹氫綅浜嗭紒pidding:瑕佷笉娌′粈涔堝姙娉曪紝鎴栬鎴戞墠鐤忓娴呯瓟涓嶄笂鏉ワ紒璁2涓浘鐗閮芥寜涓涓妯″潡鐨勬柟寮忓眳涓氨濂藉紕浜嗭紒
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓鐨 鏍囩涓紝鏂板鏍峰紡浠ｇ爜锛歜ackground-image:url(image.jpg);background-size:100%銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禸ody鐨勮儗鏅鍥剧墖鏁翠釜瑕嗙洊浜嗛〉闈紝娌℃湁鐧芥銆俬tml濡備綍璁╀竴寮鑳屾櫙鍥剧墖灞呬腑锛熸墦寮鍓嶇寮鍙戝伐鍏凤紝鏂板缓涓涓...
