CSS3-定位


    网页常见布局方式
        1 标准流
            1 块级元素独占一行 → 垂直布局
            2 行内元素/行内块元素一行显示多个 → 水平布局
        2 浮动
            可以让原本垂直布局的 块级元素变成水平布局
        3 定位
            1 可以让元素自由的摆放在网页的任意位置
            2 一般用于 盒子之间的层叠情况

        定位的常见应用场景
            1 可以解决盒子与盒子之间的层叠问题
            2 可以让盒子始终固定在屏幕中的某个位置

    使用定位的步骤
        1 设置定位方式
            属性名:position
            常见属性值:
                1 静态定位 static
                2 相对定位 relative
                3 绝对定位 absolute
                3 固定定位 fixed
        2 设置偏移值
            方向        属性名      属性值          含义
            水平        left        数字+px     距离左边的距离
            水平        right       数字+px     距离右边的距离
            垂直        top         数字+px     距离顶部的距离
            垂直        bottom      数字+px     距离底部的距离

    四种定位方式
        1 静态定位
            介绍:静态定位是默认值,就是之前认识的标准流。
            代码:position:static
            注意点:
                1 静态定位就是之前标准流,不能通过方位属性进行移动
                2 之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定

        2 相对定位
            介绍:自恋型定位,相对于自己之前的位置进行移动
            代码:position:relative
            特点:
                1 需要配合方位属性实现移动
                2 相对于自己原来位置进行移动
                3 在页面中占位置 → 没有脱标
            应用场景:
                1 配合绝对定位组CP(子绝父相)
                2 用于小范围的移动

        3 绝对定位
            介绍:拼爹型定位,相对于已经定位的父元素进行定位移动
            代码:position:absolute
            特点:
                1 需要配合方位属性实现移动
                2 默认相对于浏览器可视区域进行移动
                3 在页面中不占位置 → 已经脱标
                4 如果绝对定位的父级元素都没有设置定位,它会参照body进行移动
                5 如果父级元素有定位(除了静态定位),它会参照最近一个父元素进行移动
            应用场景:
                配合相对定位组CP(子绝父相)

        4 固定定位
            介绍:死心眼型定位,相对于浏览器进行定位移动
            代码:position:fixed
            特点:
                1 需要配合方位属性实现移动
                2 相对于浏览器可视区域进行移动
                3 在页面中不占位置 → 已经脱标
            应用场景:
                让盒子固定在屏幕中的某个位置

代码:相对定位




    
    
    Document
    


    

效果图:

CSS3-定位_第1张图片

CSS3-定位_第2张图片

代码:绝对定位




    
    
    Document
    


    
    
        

效果图:

CSS3-定位_第3张图片

 CSS3-定位_第4张图片

代码:固定定位



  
    
    
    
    Document
    
  
  
    

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

滚动条

效果图:

CSS3-定位_第5张图片

你可能感兴趣的:(CSS3,css3,前端,css,html)