美文网首页Web前端之路让前端飞Web 前端开发
css3 position:fixed 固定居中的问题

css3 position:fixed 固定居中的问题

作者: 老夫撩发少年狂 | 来源:发表于2016-12-20 10:14 被阅读806次

    固定定位:

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

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

    元素固定一般使用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

    相关文章

      网友评论

        本文标题:css3 position:fixed 固定居中的问题

        本文链接:https://www.haomeiwen.com/subject/zwyxvttx.html