uniapp 三种布局学习

一.uniapp 三种布局：

• position:relative 相对布局
• position:absolute 绝对布局
• display:flex flex布局

position:relative 相对布局

相对于父布局来说，比如说设置一个margin-top相当于padding-top 把父布局撑开，一般用法，每个布局都需要创建一个父布局，父布局的父布局一般是position:relative;父布局是position:absolute,然后设置子布局位置，可以让子布局重叠等等

position:absolute 绝对布局

绝对布局是相当于当前app内容的左上角，表示原点坐标

display:flex flex布局

flex 学习笔记

注：

当我们要使用绝对定位的时候，必须要有两个条件：

• 必须给父元素加定位属性，一般建议使用 position:relative(即：给父元素设为相对定位);
• 给子元素，加绝对定位position:absolute（给子元素设置为绝对定位）; 同时加方向属性（top ,left,rigth,bottom）
• 为什么要满足这两个条件呢？
  因为绝对定位是以父元素为基准点，进行定位。如果他没有父元素，或者它的父元素没有设置position:relative属性它就会以最近的非标准流盒子为基准点进行定位。