relative相对定位，元素不脱离文本流，移动元素后会形成空的占位符，不会对其他元素的排版造成影响。
absolute绝对定位，元素脱离文本流，相对于最近的已定位的祖先元素定位，未设置定位尺寸的情况下，浮动于原来所占文本流的位置上。

这也是为什么经常会出现一个元素相对定位后，另一个元素绝对定位的原因。父元素相对定位，不脱离文本流，子元素绝对定位浮动于父元素子上，这种类似于ps中图层的技巧在做照片墙的时候非常有用。

进行排版时，为对不同屏幕尺寸进行适配，我们一般用百分比进行布局，如一行四列的话就设置框的宽度:width:25%,那么高度怎么设置呢，以前我一直是用具体的数值，但是会有一个问题，那就是在宽屏幕下会有图片拉长失真的效果，不能等比例缩放。

直到有一次我发现了padding-top/padding-bottom属性设置成百分比，是相对于块级元素宽度设置时，一下子让我如获珍宝。例如，我们设置一个列表，

li{
    width: 25%;
    padding-bottom: 25%;
    position: relative;
    }

这样就形成了一个能按屏幕等比例缩放的正方形块级框，里面的子元素再设置为绝对定位，就能浮于这个父级元素框之上显示内容了。

li div{
    width: 90%;
    height: 90%;
    position: absolute;
    }

这样一个完美的照片墙就能做出来了。

当然除了这种方法外，也可以将元素宽和高的单位设置成rem,（rem的值通过js根据屏幕的像素宽度动态计算出来）
也能使得元素等比例缩放。每行的元素可以通过两端对齐或者其他对齐方式排列整齐。