定位 的本质
定位属性 position 定位类型分为 静态定位（static） 相对定位(relative);绝对定位(absolute);固定定位(fixed)；
静态定位：position: static 默认的，也就是文档流定位，元素的显示位置与源码顺序一致。
相对定位： position relative; 相对该元素在文档流的原始位置进行偏移。占用原先的位置来进行定位。
绝对定位： position absolute;相对于它的祖先中离它最近的”定位元素”的位置发生偏移。会脱离文档流。
定位元素：只要这个元素中有position: relative;或者position：absolute;就称为定位元素。position:static 不是定位元素。
利用绝对定位做的五环
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.box {width: 20em;height: 20em;border: burlywood solid 2em;border-radius: 50%;position: absolute;}.box:first-of-type {border: #0000ff solid 2em;}.box:nth-of-type(2) {border: #000 solid 2em;left: 20em;}.box:nth-of-type(3) {border: #df0808 solid 2em;left: 40em;}.box:nth-last-of-type(2) {border: hsl(59, 100%, 50%) solid 2em;left: 10em;top: 10em;}.box:nth-last-of-type(1) {border: rgb(94, 255, 0) solid 2em;left: 30em;top: 10em;}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body></html>
- 显示效果
