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使用技巧5个
Apr 02 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php的hash算法介绍
2014/02/13 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
bootstrap table使用入门基本用法
2017/05/24 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
python list转dict示例分享
2014/01/28 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python3实现磁盘空间监控
2018/06/21 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
路政管理专业推荐信
2013/11/11 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
2019教师的学习计划
2019/06/25 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python