HTML页悬浮div的两种方式

一、类似固定在某个地方的形式

<div style="margin: 0 auto; width: 80%; position: fixed; bottom: 5px; height: 50px; font-size: 0; line-height: 0; z-index: 100; text-align: right;"><asp:Button ID="Button2"  Style="width: 150px; height: 50px; text-decoration: none;" runat="server" Text="Apply Order"  /> </div>

其中 margin: 0 auto是为了div居中显示，width属性的设置要取决于这个div你要它显示的形式，要慢慢的来调。position: fixed用于生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

absolute 
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

二、类似导航栏悬浮的形式

css和JavaScript

<style>        .nav-fixed {            background-color: #d3d3d3;            width: 78.5%;            position: fixed;            top: 0;            z-index: 9999;        }    </style><script type="text/javascript">        window.onload = function () {            var nav = document.getElementById('nav');            window.onscroll = function () {                var top = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop//w3c，各ie的兼容                if (top >= 40) {                    addClass(nav, 'nav-fixed');                } else {                    removeClass(nav, 'nav-fixed');                }            }        }        function addClass(ele, classname) {            var oldClass = ele.className;            var pattern = new RegExp('(^|\\s)' + classname + '(\\s|$)');            if (!pattern.test(oldClass)) {                ele.className += ' ' + classname;            }        }        function removeClass(ele, classname) {            var oldClass = ele.className;            var pattern = new RegExp('(^|\\s)' + classname + '(\\s|$)');            if (pattern.test(oldClass)) {                ele.className = ele.className.replace(pattern, ' ');            }        }    </script>

html页面

<div id="nav"> <table style="width: 100%; height: 100%"> <tr> <td style="vertical-align: middle; width: 20%; text-align: left;"> <a style="color: black;">xxxxxx</a> </td> <td style="width: 80%; text-align: right;"> <asp:Button ID="btbuy"  Style="width: 150px; height: 45px; text-decoration: none;" runat="server" Text="点击"  /></td> </tr> </table></div>

js里通过获取id为nav的div，然后获取top大于某个值时，调用nav-fixed样式，其中的width属性也是要自己来调的，每个页面的情况都不相同，值也就不相同，下面的js部分应该是为了使用nav-fixed的样式吧。

参考http://jingyan.baidu.com/article/6079ad0e7950e228fe86db43.html

参考https://zhidao.baidu.com/question/416923914.html