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 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python实现登录接口的示例代码
2017/07/21 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
入团者的自我评价分享
2013/12/02 职场文书
教学改革实施方案
2014/03/31 职场文书
新店开张活动方案
2014/08/24 职场文书
纪律教育月活动总结
2014/08/26 职场文书
先进班集体申报材料
2014/12/26 职场文书
给朋友的道歉短信
2015/05/12 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
Python实现仓库管理系统
2022/05/30 Python