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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
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/06/21 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
javascript新手语法小结
2008/06/15 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
莫言获奖感言(全文)
2015/07/31 职场文书
环境卫生标语
2015/08/03 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS