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 Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python获取交互式ssh shell的方法
2019/02/14 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
android面试问题与答案
2016/12/27 面试题
办护照工作证明范本
2014/01/14 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
python实现简单聊天功能
2021/07/07 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL