css3 position fixed居中的问题

通常,我们要让某元素居中,会这样做:

#element{
margin:0 auto;
}

如果还想让此元素位置固定呢?一般我们会添加position:fixed,如下:

#element{
position:fixed;
margin:0 auto;
}

但是这样做的结果就是,元素不居中了。这说明fixed使对象脱离了正常文档流

解决方案:

#element{
position:fixed;
margin:0 auto;
left:0;
right:0;
}

但是在IE7以下的版本中无法工作,要将其更改为:

#element{
position:fixed;
margin:0 auto;
left:auto;
right:auto;
}

最后我们可以这样:

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
    strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
 }

示例代码:http://jsfiddle.net/4Ly4B/33/
如果对你有帮助,欢迎加入:QQ群:124116463,一起讨论前端技术吧!

时间: 2024-10-31 17:49:51

css3 position fixed居中的问题的相关文章

使用position:fixed属性让DIV居中

 先看一下效果:  http://www.keleyi.com/keleyi/phtml/fixedcenter.htm 关键代码是:#topmenu_keleyi_com{position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto;} 附完整代码: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

css中position:fixed实现div居中

上下左右 居中  代码如下 复制代码 div{     position:fixed;     margin:auto;     left:0;     right:0;     top:0;     bottom:0;     width:200px;     height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可 如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 下面附一个DIV 元素在浏览器窗口居中 其实,实现这

深入理解position: fixed

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>深入理解position: fixed;</title> <style type="text/css"> * { padding: 0px; margin: 0px; } #header { position: fixed; width: 900px; height

使用CSS样式position:fixed水平滚动的方法

 这篇文章主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下 使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码

CSS{position:fixed}让HTML固定在浏览器的某个位置

文章简介:跨浏览器的CSS固定定位{position:fixed}. 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置. IE7.Firefox.Opera,都支持CSS的{position:fixed},所以很容易实现(<详解定位与定位应用>) IE

IE6不兼容position:fixed属性的解决办法

文章简介:IE6下不兼容position:fixed属性!在网上也看了一些资料还是不行! IE6下不兼容position:fixed属性!在网上也看了一些资料还是不行! position: fixed;这个属性用起来确实很方便,可以轻松的实现固定位置的浮动层效果.但是,它不支持IE6及以下版本.于是很多同学使用JS模拟.今天写了一个DEMO,涉及左侧.右侧.及上下两边,共四种位置的固定,与以往的教程不同的地方是,它使用CSS表达式来兼容IE5.IE6,且避免了js模拟时,拖动滚动条时出现抖动的问

CSS&amp;nbsp;position:fixed&amp;nbsp;for&amp;nbsp;IE

css  position:fixed; 是fixed的用法,配合overflow实现将一个元素固定定位到网页的一个位置上面Main CSShtml {background:#ccc;}body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}body {font-family: georgia, serif; font-size:12px;} #menu {disp

js完美解决IE6不支持position:fixed的bug

  关于IE6,虽然它已被微软抛弃很久了,但是由于大天朝的特殊行情(盗版)对于前端工程师来说,解决IE6兼容position:fixed的问题显得很重要.特别是你需要用到头尾悬停调用的时候 先来看段代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

【原】使用iScroll.js解决ios4下不支持position:fixed的问题

一直折腾position:fixed在ios和android的使用,而事实上这么上流的ios4系统居然不支持position:fixed,幸运的是苹果公司在ios5系统修复了这个bug,比较理想的解决方案是让所有用户把系统升级到ios5及以上版本,这种想法在国外还好,在国内环境下,因为越狱而不想去升级手机的人很多,如果强迫用户去升级,那可能会把你的产品KS了.而你也不可能跟你老板说ios4什么不兼容那个属性啊,让用户升级啊!老板看到的是结果,你做不出来,别人怎么做得出来呢,这样你老板可能会对你的