余老师的学习内容（持续更新）

余老师的学习内容（持续更新）

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、区别：绝对定位其位置将以其所在容器的左上角为原点，进行偏移

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

    （5）浮动

        a、以浮动流的方式，排列多个盒子

        b、flo：left/right

        c、在普通流中消失，普通流中的邻居和父容器感觉不到它的存在