Div floating layer, scroll bar move, position remains unchanged in 4 ways summary

Source: Internet
Author: User
Tags xmlns

  This article is mainly on the Div floating layer, scroll bar movement, the position remains unchanged 4 ways to summarize the introduction, the need for friends can come to the reference, I hope to help you.

Div at the top unchanged, scroll bar scrolling, div or at the top! Directly upload the source code:   Method One:   code as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">     <html xmlns=" http://www.w3.org/1999/xhtml "> <head>  <title>div floating layer, scroll bar moving, Keep position unchanged </title>  <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/>  <style type=" Text/css ">  Body{background-image:url (About:blank); background-attachment:fixed;} #float {width:344px;height:34px;border:1px solid #C0DBF8;p osition:absolute;top:0px} </style>  </head >  <body> <div id= "float" >ddd</div> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br> <br><br><br><br>≪br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br> <br≫<br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br> </body>  < Script type= "Text/javascript" > var io=document.getelementbyid (' float '), y=io,h=0,ie6; Ie6=window. Activexobject&&!window. XMLHttpRequest; while (Y) {h+=y.offsettop; Y=y.offsetparent}; if (IE6)     io.style.csstext= "Position:absolute;top: (This.fix?) (document.documentelement.scrolltop-(this.javascript| |) +h+ "): 0)"; Window.onscroll=function () {    var d=document,s=math.max (D.documentelement.scrolltop, DOCUMENT.BODY.SCROLLTOP);     if (s>h&&io.fix| | s<=h&&! Io.fix) return;     IF (! IE6) Io.style.position=io.fix "": "Fixed";             io.fix=! Io.fix; }; Try{document.execcommand ("Backgroundimagecache", False,true)}catch (e) {}; </script>  </html>      Method Two: code is as follows: <strong><body topmargin= "0" bottommargin= "0" leftmargin= "0" rightmargin= "0" style= "Overflow:hidden"; >  <!--div</strong> to realize <STRONG>-->  <div style= "width:100%; height:100%; Overflow:scroll; " >   <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br>   <br><br>< br><br><br><br><br><br><br><br><br><br><br>< br><br><br><br><br>   <BR><BR><BR><BR><BR><BR ><br><br><br><br><br><br><br><br><br><br><br ><br>   <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> &NBsp;</div> <div style= "border:1px red solid; width:300px; height:300px;margin:-150px 0 0-150px; Position:absolute; left:50%; top:50%; " ></STRONG>   Centered layer <STRONG> </div> </body></STRONG>   Method Three: The code is as follows: <body topmargin= "0" bottommargin= "0" leftmargin= "0" rightmargin= "0" style= "Overflow:hidden;" >  <!--iframe to realize  -->  <iframe src= "http://www.jb51.net" width= "100%" height= "100%" Frameborder= "0" ></iframe> <div style= "border:1px red solid; width:300px; height:300px;margin:-150px 0 0-150px; Position:absolute; left:50%; top:50%; " >   Centered layer  </div> </body>   method four: [Using CSS to center]   code as follows: <style type= "Text/css" > <!- -html,body {height:100%; margin:0px font-size:12px;}   mydiv {background-color: #f9fff6; border:1px solid #00990 0; Text-align:center; line-height:25px; font-size:13px; Font-weight:bold; z-index:99; width:300px; height:50px; left:50%;/*ff ie7*/top:50%;/*ff ie7*/  MARGIN-LEFT:-150PX!IMPORTANT;/*FF IE7 of it width */half /*FF IE7 half of its height*/  margin-top:0px; Position:fixed!important;/*ff ie7*/position:absolute;/*ie6*/  _top:       expression (eval ( Document.compatmode &&             document.compatmode== ' Css1compat ')?             Documentelement.scrolltop + ( Document.documentelement.clientheight-this.offsetheight)/2:/*ie6*/            Document.body.scrollTop + (Document.body.clientheight-this.clientheight)/2);/*ie5 ie5.5*/ }-->  </ Style> <script language= "javascript" type= "Text/javascript" > Function Showdiv () {  document.getElementById (' Popdiv '). style.display= ' block ';  } window.onload=function () {    showdiv ();} </script> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "HttP://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> < head> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <title> always in the middle Div (support ie FF) </title> </head> <body> <div id=" Popdiv " class= "mydiv" style= "Display:none;" > Always in the middle <br/> </div> <br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/> </body> </html>    
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.