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学习笔记
May 23 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python MD5加密实例详解
2017/08/02 Python
Python实现分段线性插值
2018/12/17 Python
Python高斯消除矩阵
2019/01/02 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python speech模块的使用方法
2020/09/09 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
总经理助理工作职责
2014/02/06 职场文书
广告语设计及教案
2014/03/21 职场文书
加入学生会演讲稿
2014/04/24 职场文书
机关保密承诺书
2014/06/03 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年暑假生活总结
2015/07/13 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python