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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
css3实现的加载动画效果
Apr 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 操作调试的方法
2012/07/12 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
基于JavaScript 类的使用详解
2013/05/07 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
python获取外网IP并发邮件的实现方法
2017/10/01 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
python和JavaScript哪个容易上手
2020/06/23 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
先进集体获奖感言
2014/02/13 职场文书
英语教师自荐信
2014/05/26 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
计划生育个人总结
2015/03/02 职场文书
离婚起诉书范本
2015/05/18 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers