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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python的pip安装以及使用教程
2018/09/18 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
python打包成so文件过程解析
2019/09/28 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
利群广告词
2014/03/20 职场文书
解除财产保全担保书
2014/05/20 职场文书
企业标语大全
2014/07/01 职场文书
人民调解协议书范本
2014/10/11 职场文书
礼貌问候语大全
2015/11/10 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python