css3 position fixed居中的问题

简介: <p>通常,我们要让某元素居中,会这样做:</p> <p></p> <pre code_snippet_id="370412" snippet_file_name="blog_20140530_1_3214216" name="code" class="html">#element{margin:0 auto;}</pre><br><p></p> <pre></pre> <p

通常,我们要让某元素居中,会这样做:

#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'});
 }
示例代码: http://jsfiddle.net/4Ly4B/33/
如果对你有帮助,欢迎加入:QQ群: 124116463,一起讨论前端技术吧!






相关文章
|
4月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
185 0
|
6月前
|
前端开发 定位技术 开发者
CSS基础-定位:static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式:static、relative、absolute和fixed,强调理解它们的差异对前端开发者的重要性。static遵循正常文档流,relative通过偏移量调整位置但不脱离文档流,absolute完全脱离文档流并依附于最近的非static祖先元素,fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略,并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
52 1
|
5月前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
114 0
|
5月前
|
前端开发
css display position float 之间的关系
css display position float 之间的关系
27 0
|
7月前
|
前端开发
CSS position 小结
CSS position 小结
33 0
|
前端开发 容器
|
前端开发 容器
【CSS】定位属性position使用详解(static、relative、fixed、absolute)
css定位属性position:static、relative、fixed、absolute详细介绍及使用样例。
149 0
|
前端开发 Linux 程序员
「CSS」知识点笔记:position
「CSS」知识点笔记:position
109 0
「CSS」知识点笔记:position
|
前端开发
web前端-CSS(display,position,overflow和浮动float)
web前端-CSS(display,position,overflow和浮动float)
134 0
|
前端开发
CSS Position(定位)
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。 也就是说,普通流中的元素的位置由元素在 HTML 中的位置决定。
174 0
CSS Position(定位)