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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 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 PDO中文乱码解决办法
2009/07/20 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php桥接模式应用案例分析
2019/10/23 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
js实现旋转木马轮播图效果
2020/01/10 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
浅谈Python NLP入门教程
2017/12/25 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
品酒会策划方案
2014/05/26 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
2015年度保密工作总结
2015/04/24 职场文书
小学入学感言
2015/08/01 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python