今天herb同 学在twitter上问到,如何利用CSS使搜索条固定显示于窗口的某个位置。好像之前也碰过这个问题,不过,当时并没有解决,用JS有现成的方法,不 过,这次要求的就是不用JS。然后,开始写代码,测试,最终,IE6下依然有问题。position:fixed;没有正常显示。
在别的文章中看到,可以用position:absolute;来解决IE6的问题,不过,添加position:absolute;之后,依然没 有成功。当然,最终,还是用position:absolute;来解决。只是,不一定能成功。因为,有一句非常重要的话需要理解。
以下是代码片段:[www.xlnv.net] fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的。(via,刚才竟然没找到来源,囧。) |
只有记住了这句话,才知为什么position:absolute;很多地方都给出了结果,但当时并未能解决。因为html被我设置 position:relative。是上面这一句启发了我,最终才能够解决这个问题。我们拉动滚动条的时候,内容都会随着窗口滚动;这时滚动的是 body。如果让绝对定位的父级元素定为body,刚我们需要固定的某个模块将会固定在网页的某个位置,而不是固定在窗口的某个位置(貌似在 firefox中,html与body之间的介限并不明确?)。
我们需要做的是,让body保持其原有高度,让html只有一个窗口那么高。代码我们可以这样写:
以下是代码片段:[www.xlnv.net]html{overflow:hidden;} // 重要!
|
这时,html将只有一个窗口那么高,超过的,直接hide。而body会随高度自动变化。这时,我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上角,代码可以这样写:
以下是代码片段:[www.xlnv.net]html{overflow:hidden;}
|
这样,窗口就固定在右上角了。而其他浏览器,我们可以用position:fixed;来解决固定的问题。其他浏览器完整的代码如下:
以下是代码片段:[www.xlnv.net]#rightform {text-align:center;padding:50px;font:14px/22px Georgia, "Times New Roman", Times, serif;height:1200px;background:#ffc;}
|
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
相关推荐
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离...
position:fixed;实现底层页面不跟随浮层模块滚动
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
IE7已经支持position:fixed了,而我们的IE6呢?还继续使用js事件?消耗资源,破坏结构,画面闪耀。
position:fixed在ie6的使用,hack的使用办法
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!--[if IE 6]> <style type...
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>
现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容。起始这个组件,完全可以自己利用javascript的滚动事件[removed]与...IE6: IE8: FireFox: 首先是HTML+CSS的布局,在页面
实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
可是要在IE6中实现固定效果,position: fixed;就不奏效了。 目前我所知的ie6下fixed的方案大概有纯css和expression+js两种,各有利弊。 1.纯css法 利用了ie6下html元素外面套的一个匿名元素,即 * ,利用选择器层级...
NULL 博文链接:https://piziwang.iteye.com/blog/424862
主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下
主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧