前端学习之——相对定位relative

前端五大定位：static、absolute、relative、fixed、sticky中，我最不常用的大概就是relative了。

relative相对定位，相对其自身正常位置进行定位。由于平时flex弹性布局使用的比较多，一般也就不会用到定位，即使用定位，也是fixed和absolute相对较多一点。

背景：今天公司的UI给出了一个卡片，大体布局如下：

这个红色的小框是黑色大框的子元素，但左边超过了父元素的边界。

于是我打算试一下relative响度自身定位，代码如下：

postion:relative;
top:0;
right:20px

元素块相对其自身正常位置向左偏离20px得到效果图的样子。