css3 position fixed固定居中问题解决方案


Posted in HTML / CSS onAugust 19, 2014

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

复制代码
代码如下:

#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'});
}
HTML / CSS 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 #HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 #HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 #HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 #HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 #HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 #HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 #HTML / CSS
You might like
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
浅谈js中的this问题
2017/08/31 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python中defaultdict的用法详解
2017/06/07 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
自我鉴定200字
2013/10/28 职场文书
护校行动方案
2014/05/31 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
伏羲庙导游词
2015/02/09 职场文书
团员个人总结
2015/02/26 职场文书
给病人的慰问信
2015/03/23 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript