First look at the ie7+, Firefox, Opera code:
| The code is as follows |
Copy Code |
<style type= "Text/css" >
#backTop {position:fixed; bottom:0; right:0;}
</style> |
In IE6, you need some CSS hack to address it, and you need to add:
| The code is as follows |
Copy Code |
<!--[if IE 6]>
<style type= "Text/css" >
HTML {Overflow:hidden;}
body {height:100%; overflow:auto;}
#backTop {position:absolute;right:17px;}
</style>
<! [endif]--> |
The absolute position of the ps:fixed element is relative to the HTML element, and the scroll bar is the BODY element, which is why the RIGHT:17PX is set
Further consideration of IE5.5 and the following versions:
| The code is as follows |
Copy Code |
<!--[If Lt IE 6]>
<style type= "Text/css" >
#backTop {position:absolute top:expression (eval (document.body.scrollTop + 50));}
</style>
<! [endif]--> |
Instance
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Author" content= "Chomo"/>
<title> use of simulated position:fixed to do couplet </title>
<style>
* {padding:0; margin:0;}
body {height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;}
HTML {height:100%; overflow:hidden;}
. fixed {position:absolute; top:10px; left:50%; width:100px; margin-left:-490px; height:350px; background: #fc0; border : 1px solid #f60;}
. fixed2 {position:absolute; top:10px left:50%; width:100px; margin-left:370px; height:350px; background: #fc0; border : 1px solid #f60;}
. wrapper {height:100%; overflow:auto; overflow-y:scroll;}
. body {width:700px; margin:0 auto; background: #f2f2f2; padding:20px;}
</style>
<body>
<div class= "fixed" > Pig strong </div>
<div class= "Fixed2" > Another pig strong </div>
<div class= "wrapper" >
<div class= "Body" >
[Professional » industry watch] Rainbow show ip afraid into the defendant? TX to the RAINBOW hint? Jarry 2008-11-17 <br/>
[Professional » industry observation] Shanghai East Building kappa Women: the role of the Internet = hype? Jarry 2008-11-13 <br/>
[Professional » Industry Watch] Global business networking platform: xing.com jarry 2008-11-1 <br/>
[Professional » Industry watch] What is Word-of-mouth marketing? Jarry 2008-10-17 <br/>
[Professional » industry observation] the opening of the second Open Web competition Jarry 2008-10-16 <br/>
[Professional » industry observation] Youa C2C Network trading platform will be online Jarry 2008-10-12 <br/>
[Professional » Industry watch] The first high-profile Google Android phone listing Jarry 2008-10-10 <br/>
[Professional » Industry watch] Seven black truths Jarry 2008-10-8 <br/> for subscribers
[Professional » industry observation] five necessary conditions to make money by blogging Jarry 2008-10-7 <br/>
[Professional » industry observation] Windows Live Messenger 9 Wave3 final release date determines Jarry 2008-10-6 <br/>
[Professional » industry observation] 2008 China Internet Conference opened yesterday Jarry 2008-9-24 <br/>
[Professional » industry observation] Youdao hot smell on-line! Jarry 2008-9-19 <br/>
[Professional » industry observation] Phpcms 2008 Beta September 1 Open source free release Jarry 2008-9-17 <br/>
[Professional » Industry watch] The Adobe AIR application Jarry 2008-9-10 <br/> Introduced by the computer newspaper
[Professional » industry observation] WordCamp 2008 is about to convene Jarry 2008-8-28 <br/>
[Professional » industry observation] The main steps to develop a hardware firewall Jarry 2008-8-11 <br/>
[Professional » Industry Watch] Count 20 windows 7 features that should be available-Windows 7 Home--iwindows7.com Jarry 2008-8-6 <br/>
[Professional » Industry watch] Internet operators and internet commentators Jarry 2008-6-22 <br/>
[Professional » Industry watch] interesting blogbus pause service hint Jarry 2008-6-12 <br/>
[Professional » Industry watch] who earns the most? Programmers earn big competition Jarry 2008-6-11 <br/>
[Professional » industry observation] The characteristics of blog marketing Jarry 2008-6-10 <br/>
[Professional » Industry observation] recommend an advertising platform in the text: Group view Jarry 2008-6-8 <br/>
[Professional » industry observation] Google official explains why to replace the small icon Jarry 2008-6-8 <br/>
[Professional » industry observation] 1GB Jarry 2008-6-8 <br/> 20 years ago
[Professional » industry observation] "pr=7, Sango, pr=8, harmony between heaven and Man" PR realm talk Jarry 2008-6-8 <br/>
[Professional » Industry watch] Big website lies, have you ever been cheated by Jarry 2008-6-8 <br/>
[Professional » industry observation] blog.35 free binding domain name WP service Jarry 2008-6-7 <br/>
[Professional » industry observation] Tencent SNS:QQ alumni began to Jarry 2008-6-7 <br/>
[Professional » industry observation] Measure blog value seven indicators Jarry 2008-6-6 <br/>
[Professional » industry observation] alternative thinking: Baidu is the client I (stationmaster) to learn to do Miss Jarry 2008-6-6 <br/>
[Professional » industry observation] China Telecom to undertake the operation strategy after CDMA Jarry 2008-6-5 <br/>
[Professional » Industry Watch] Microsoft new system Windows 7 Desktop screenshot (16pics) Jarry 2008-6-5 <br/>
[Professional » industry observation] 3G Portal: Wireless Internet portal Jarry 2008-6-5 <br/>
[Professional » industry observation] RETAGGR: Personalized business card making Jarry 2008-6-3 <br/>
[Professional » industry observation] Acrobat:adobe's network office Jarry 2008-6-3 <br/>
[Professional » industry observation] eight factors affecting the interactive operation of blogs Jarry 2008-6-2 <br/>
[Professional » Industry watch] 10 companies that influence Chinese communication habits Jarry 2008-6-2 <br/>
[Professional » Industry watch] May browser wars upgrade FireFox 3 Jarry 2008-6-2 <br/>
[Professional » Industry Watch] Why do many bloggers not make money? Jarry 2008-5-31 <br/>
[Professional » industry observation] VIA OpenBook Mini Notebook graphic Jarry 2008-5-31 <br/>
[Professional » Industry watch] human flesh search: Angel or Devil? Jarry 2008-5-30 <br/>
[Professional » industry observation] 360doc: Personal library, online collection Jarry 2008-5-30 <br/>
[Professional » industry observation] Time network: Movie, community, you and I jarry 2008-5-30 <br/>
[Professional » Industry watch] The top ten most annoying software Jarry 2008-5-27 <br/>
[Professional » Industry watch] paying employees to resign, Zappos's secret of success Jarry 2008-5-27 <br/>
[Professional » industry observation] three issued three 3G license plate Jarry 2008-5-25 <br/> After the announcement of the reorganization of telecom industry
[Professional » industry observation] QQ Network hard disk web version of the secret release Jarry 2008-5-25 <br/>
[Professional » industry observation] Google sites began opening its own personal homepage to everyone free of charge Jarry 2008-5-23 <br/>
[Professional » Industry watch] 10 unknown Google failed works Jarry 2008-5-22 <br/>
[Professional » industry observation] C2call: Network telephony service based on Web browsers Jarry 2008-5-21 <br/>
[Professional » Industry watch] Microsoft gives up Vista with Windows 7 instead of Jarry 2008-5-21 <br/>
[Professional » Industry watch] 2008 Web2.0 products Jarry 2008-5-21 <br/>
[Professional » industry observation] on Google earth to see the news Jarry 2008-5-21 <br/>
[Professional » industry observation] National day of mourning CCTV enable wenchuan.cn domain name Jarry 2008-5-20 <br/>
[Professional » Industry watch] Microsoft to contend with Google's plan: 20 billion acquisition of Facebook Jarry 2008-5-20 <br/>
[Professional » Industry watch] What's not to sell? -ebay Ten Mars auctions Jarry 2008-5-19 <br/>
[Professional » industry observation] Internet marketing-internet is the means, marketing is the essence Jarry 2008-5-13 <br/>
[Professional » industry observation] Mobile phone mailbox also plagiarism? Jarry 2007-11-2 <br/>
[Professional » industry observation] Tnnd, want to completely give up MSN. Jarry 2007-6-11 <br/>
[Professional » Industry watch] Fun online tools Jarry 2006-11-11 <br/>
[Professional » industry observation] Let the toll site go to die, with Google Breakthrough!! Jarry 2005-11-20 <br/>
</div>
</div>
</body>
|
