CSS

作者: 78f168f2de96 | 来源:发表于2019-02-28 08:24 被阅读0次

1、作用:用于确定一个盒子出现在什么位置上

2、使用方式:position

3、CSS定位分为:普通流定位、相对定位、绝对定位、固定式布局

(1)普通流定位

        a、position:static  默认行为

        b、从上到下,从左到右,按顺序以“流”的方式进行定位

        c、子元素会排列在父容器的element内部

        d、block:独占一行

        e、inline,inline_block:不换行,当容器不能容纳,自行换行

(2)相对定位

        a、position:relative  默认行为

        b、在普通流的基础上,进行“偏移”

        c、其在“普通流”中的位置,仍然保留

        d、使用left,top  right,bottom进行位置调整

        e、理解:相当于元素在一个“私有的层”中,相当于自己原始位置进行偏移

            注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

    (3)绝对定位

        a、position:absolute  默认行为

        b、在“普通流”中完全消失

        c、其位置将以其所在容器的左上角为原点,进行偏移

        d、使用left,top  right,bottom进行位置调整

        ··  Right=0px top=0px 右上角定位

            Left=0px bottom=opx 左下角定位

        e、理解:相当于元素在一个“私有的层”中,相对于容器的左上角位置,进行偏移

              绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

    (4)固定式布局

        a、固定式布局就是绝对定位  position:fixed;

        b、区别:绝对定位其位置将以其所在容器的左上角为原点,进行偏移

                        固定式布局其位置将以其所在窗口的左上角为原点,进行偏移

相关文章

网友评论

      本文标题:CSS

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