css3 position:fixed 固定居中的问题

固定定位:

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

元素固定一般使用position:fixed,fixed表示脱离了正常的文档流,但若是此元素居中,方法如下:

1.如果想使某元素居中:$ele{ margin:0 auto}  

margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应    marin:语法结构

(1)margin:10px; 四边统一外边距

(2)margin:10px 20px; 上下、左右外边距

(3)margin:10px 20px 30px; 上、左右、下外边距

(4)margin:10px 20px 30px 40px; 上、右、下、左外边距

(5)也可单独设置上下左右 

2.这样做的结果就是,元素不居中了。这说明fixed使对象脱离了正常文档流。

#element{

position:fixed;

margin:0 auto;

}

3.解决方案:

#element{

position:fixed;

margin:0 auto;

left:0;

right:0;

}

另外在购物网站布局右侧导航栏时使用

position:fixed ;

left:50% ; //先让元素居中放置

margin-left:400px;//在居中放置的基础上偏移400像素,

注:margin-xxx 的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。

参考博客:http://blog.csdn.net/ywl570717586/article/details/53392957

   http://www.jb51.net/css/206753.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 563评论 0 5
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 960评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,311评论 0 5
  • 一 独居别苑一月有余,无人拜访。闲暇时除了弹弹琴,喂喂鱼外无事可做。旧时喜爱的东西甚多,却常苦于没有足够的时间去做...
    烟火_yoyo阅读 676评论 1 12