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人物行走动画
Feb 24 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python中二维阵列的变换实例
2014/10/09 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
企业员工薪酬方案
2014/06/04 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
离婚协议书范本
2015/01/26 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python