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 中实现炫酷的loading效果
Apr 26 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
Laravel find in set排序实例
2019/10/09 PHP
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
对numpy中shape的深入理解
2018/06/15 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python通过文本和图片生成词云图
2020/05/21 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
科学发展观演讲稿
2014/09/11 职场文书
单位租车协议书
2015/01/29 职场文书
父母教会我观后感
2015/06/17 职场文书
远程教育培训心得体会
2016/01/09 职场文书