定位

91 阅读1分钟

css文档流:

普通流:元素默认从上至下,从左至右的排列顺序
浮动流:添加了浮动后的排列顺序,脱离文档流(普通流)
定位流:添加了定位后的排列顺序,脱离文档流(普通流)
定位
定位:改变元素的位置(禁止在搭建页面结构过程中大面积使用定位)
position:定位;
    坐标轴:
        水平: left right
        垂直: top bottom
定位值:
    默认定位:static
        [注]默认值,无法改变坐标属性
        
绝对定位:absolute
    脱离文档流
    能改变坐标属性,可以为负数
    默认参考根元素(html),或者参考最近的有定位的父元素(默认定位除外)
    
相对定位:relative
    占据文档流
    能改变坐标属性,可以为负数
    默认参考自身加载到浏览器中的初始位置
    
固定定位: fied
    脱离文档流
    能改变坐标属性,可以为负数
    参考浏览器窗口改变自己的位置
    在页面中固定不动
    
粘性定位:
    占据文档流
    能改变坐标属性,可以为负数
    参考浏览器窗口改变自己的位置
    在页面中固定不动
    结合了相对定位和固定定位的特征
    
定位居中方式:
    方法一:
        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto; 
    方式二:
        position: absolute;
        left :50%;
        margin-left:-宽度的一半;
        top:50%;
        margin-top:-高度的一半;