css06-定位

定位:
    1:什么是定位;
    2:定位的四种分类;
    3:四种分类的特点;
    4:为什么常用子绝父相布局;
    css布局三种机制:
        1:标准流
        2:浮动
        3:定位

    1:为什么使用定位:
        1:将盒子固定到某一个位置
        2:可以自由漂浮在其他盒子之上
    2:定位详解:
        1:三种机制的层级关系:定位>浮动(脱标)>标准流
        2:定位=定位模式+边偏移(偏移量)
            通过top:80px left bottom right来实现
    3:使用方式:
        1:选择器{
            position:属性值;
        }
        2:属性值:
            1:relative 相对定位(重要)
                1:定义:相对定位:相对于该盒子相对于标准流的位置来说的
                2:使用:
                    position:relative
                    top left bottom right
                3:特点:(重要)
                    1:相对于自己在标准流中的位置来实现;(按照之前的位置来决定)
                    2:保留原来位置;
            2:absoute 绝对定位(重要)
                1:定义:father(可以是直接父类,也可以是间隔父类,如果是间隔父类,则以间隔父类为标准)和son
                    1:如果father没有设置absolute,则son设置绝对定位模式后,会以当前的浏览器界面为准,一定位    置;
                    2:如果在father中设置了absolute,则son设置absolute之后,会以father为准;
                    3:如果grandfather中设置了absolute,father中并没有设置absolute,则son设置后,会以grandfather为准;
                2:特点:
                    1:是以带有定位(相对,绝对,固定)的父级元素来移动位置,如果父级都没有定位,则以浏览器文档为标准;
                    2:不保留原来的位置,完全脱标
                3:子绝对父相对:son用绝对,父用相对(因为父要占用位置)
                4:对于浮动来讲,不能压着padding,border,img
            3:fixed   固定定位(重要)
                1:特点:是绝对定位的特殊方式
                    1:不占位置,脱标
                    2:跟父级无关,只以浏览器可视区域为准;
                    3:不随着滚动条移动(一般用于做悬浮)
                2:使用方式:
                    position:fixed
                    left 0 ;
                    top 0 ;
            4:static  静态定位(了解即可默认的定位模式)
                不用定位的时候使用这个static
                按照标准流的特性摆放位置,没有边偏移
                静态定位在布局中基本不用
    拓展:
        1:绝对定位的水平居中:
            left:50% ;
            margin-left:-100px;
            垂直居中效果类似
        2:相对定位和普通流水平居中:margin: auto;
        3:绝对定位堆叠顺序:默认:后来者居上;
            1:在最下面的会覆盖上面的元素;
            2:堆叠顺序:z-index可以调整盒子的堆叠顺序;
                1:使用:正整数,负整数,0,没有单位,数值越大越靠上
                2:z-index只存在相对,绝对,固定定位里,其他无效;
        4:标准流:上下排列
        5:浮动:左右排列
        6:定位:层叠排列
        7:改变显示模式:
            1:display:inline-block,默认宽度为文本宽度
            2:float:相当于将元素转换为行内块
            3:absolute(fixed):相当于转换为行内块
        8:行内元素配合定位和浮动,直接给宽高即可
        9:定位的盒子需要单写宽度
        10:固定定位和绝对定位完全脱标,不占位置
        11:margin-top:外边距合并问题:
            1:father设置border-top
            2:father设置padding-top
            3:overflow:hidden
            4:son或者father设置float
            5:father设置absolute(fixed)
        12:绝对定位:
            1:转换展示模式
            2:解决外边距合并的问题
        13:
            border-top-left-radius
            border-top-right-radius
            border-bottom-left-radius
            border-bottom-right-radius
            也可以:
            border-radius:左上,右上,左下,右下