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背景下的@font face规则
May 04 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 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 GeoIP的使用教程
2011/03/09 PHP
PHP5.3新特性小结
2016/02/14 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
java解析json方法总结
2019/05/16 PHP
javascript 写类方式之一
2009/07/05 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python追加元素到列表的方法
2015/07/28 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
python代码中怎么换行
2020/06/17 Python
python简单实现9宫格图片实例
2020/09/03 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
关于期中考试的反思
2014/02/02 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
大二学年个人总结
2015/03/03 职场文书
离婚案件答辩状
2015/05/22 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle