html5固定div位置,如何让DIV固定在页面的某个位置

本文探讨了如何使用CSS的`position:fixed`属性实现DIV元素在页面固定位置的问题,以及在IE浏览器中遇到的兼容性挑战。通过创建虚拟容器和调整样式,解决了在不同浏览器中使DIV保持固定位置的难题。
摘要由CSDN通过智能技术生成

利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点:

1、使用了大量的计算,每次滚动,都少不了一大堆的运算。

2、使用了JavaScript脚本,脚本这东西受到浏览器的限制,即便没有限制,也同样因为网页的下载模式问题,可能因为脚本下载未完成或者下载失败而致使脚本无法正确运行。

3、条条大路通罗马,但是看看那方块,当快速滚动滚动条的时候,会发现那个可爱的方块抖动地厉害。这也难怪,那么多的计算谁能受得了?

那有没有比较“平静”高效的表示方式呢?比如是否有一种用CSS的方式呢?

首先,我们将目光投向了CSS规范,我想很多人和我一样很快就想到了position属性,说到定位,我们很容易想到这个属性。这个属性一共有四个选项:static、relative、absolute、fixed(详情请点击)。很高兴,我们在阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的:

fixed:

位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 ”left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

于是我们很快就有了以下的代码,不过很遗憾,IE中并不能通过严格的测试,但是FireFox中却可以通过测试!

Only fit 
如果你想在 HTML 页面上滚动时让某个 `div` 的位置悬浮不变,可以使用 CSS 中的 `position: fixed;` 属性来实现。这个属性会让元素的位置相对于浏览器窗口固定不变,而不是相对于文档流的位置。 下面是一个示例代码,展示如何使用 `position: fixed;` 来让一个 `div` 的位置悬浮不变: ```html <!DOCTYPE html> <html> <head> <style> #fixed-div { position: fixed; top: 10px; right: 10px; width: 200px; height: 100px; background-color: lightblue; } </style> </head> <body> <div id="fixed-div"> 这个 div位置会在页面滚动时悬浮不变。 </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nunc rhoncus, viverra mauris eu, cursus ipsum. Nam eu sodales mauris. Maecenas at sodales ipsum. Sed ut eros vel diam consequat commodo. Ut elit velit, congue eget orci nec, pharetra hendrerit elit. Ut bibendum convallis nisi, sit amet finibus ex bibendum a. Nulla facilisi. Aenean euismod enim vel risus imperdiet euismod. Curabitur euismod tincidunt neque, nec elementum lorem. </p> <p> Mauris eget massa enim. Nullam at tellus vel ex sagittis suscipit. Sed nec tellus eu quam lobortis dignissim. Morbi eget diam id felis semper semper. Nunc pulvinar, nunc quis interdum suscipit, nisl quam accumsan enim, ut viverra magna libero in sapien. Fusce aliquam vestibulum orci, id tempor lorem viverra eu. Proin interdum, mauris vitae faucibus malesuada, augue nibh feugiat tellus, sed varius purus arcu vel turpis. Sed eget ante quis felis lacinia commodo. </p> <p> Integer et magna at orci bibendum efficitur. Suspendisse iaculis congue justo, vel rutrum enim fringilla eu. Fusce pellentesque euismod lorem, eu scelerisque purus malesuada vel. Sed sit amet nisi dignissim, lacinia mauris nec, varius elit. Nulla facilisi. Etiam maximus, velit vel rhoncus consequat, ex arcu imperdiet arcu, eu bibendum nulla metus vel orci. Maecenas bibendum, mauris eget rutrum egestas, mi odio tempus nisi, ac viverra purus sem id velit. </p> </body> </html> ``` 在上面的代码中,我们创建了一个 `div` 元素,并把它的 `position` 属性设置为 `fixed`,这样它的位置就会固定在浏览器窗口的右上角。在这个例子中,我们还设置了 `top` 和 `right` 属性来调整 `div` 元素的位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值