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的Media Queries(跨平台设计)
Jul 27 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python实现数据分析与建模
2019/07/11 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
一文解答什么是MySQL的回表
2022/08/05 MySQL