1、position:fixed
<html> <head> <style> #b { border:5px solid #300; width:100px; background-color:#390; height:100px; margin:10; left:30px; bottom:30px; position:fixed; } </style> </head> <body> <div id="b">b</div> </body> </html>
2、position:absolute
<html> <head> <style> #e { border:5px solid #00F;/*边框宽度,边框样式,边框颜色*/ width:50px; height:50px; margin:10px; background-color:#0F0;/*div背景颜色*/ right:50px; bottom:50px; position:absolute; } #c { border:3px double #FF0000; width:400px; height:200px;} #d { border:3px double #FF0000; width:400px; height:200px; position:absolute;}/*外层上给固定一个position,让里面的bdiv针对ddiv进行位置判定*/ </style> </head> <body> <div id="c">c<div id="e">e</div></div> <div id="d">d<div id="e">e</div></div> </body> </html>
3、position:relative
<html> <head> <style type="text/css"> #b { border:5px solid #300; width:100px; background-color:#390; height:100px; margin:10; left:30px; top:30px; position:fixed; } #bb { border:5px solid #300; width:100px; background-color:#390; height:100px; margin:10; left:100px; top:80px; position:relative; } </style> </head> <body> <div id="b">b<div id="bb">bb</div></div> </body> </html>