HTML页悬浮div的两种方式

最新推荐文章于 2024-04-30 05:55:10 发布

御行所

最新推荐文章于 2024-04-30 05:55:10 发布

阅读量7.9w

点赞数 8

分类专栏： HTML 文章标签： div悬浮

本文链接：https://blog.csdn.net/u012698249/article/details/78031155

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

<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>