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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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/07/02 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python网络爬虫实例讲解
2016/04/28 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
python 爬取小说并下载的示例
2020/12/07 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
入团者的自我评价分享
2013/12/02 职场文书
《云房子》教学反思
2014/04/20 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
暑期学习心得体会
2014/09/02 职场文书
给客户的感谢信
2015/01/21 职场文书
改进工作作风心得体会
2016/01/23 职场文书