HTML中的定位关系的总结

HTML中定位关系我觉得很不简单，让我将近花费了半天的时间，才触及到皮毛。突然发现有时候就算你懂了代码，也不一定表示你会用，这不仅需要我们会合理的运用代码，还需要有一个好的逻辑管理就比如拿京东上一个小小的案例来说。

先不管这个北京前面的那个定位图标，首先我们要弄好逻辑关系。
首先北京是一个div，然后这个div下包含一个比较大的div，就是这个，

刚开始的时候我是将一行看成一个无序列表，总共7个无序列表，而且第一个北京有框且比较小，我就设置了北京这个div的宽，但是当我设置无序列表的显示方式是display：inline-block;的时候发现他们并不是一排排列的而是一列排列的，经过很长时间的思考突然想到可能和北京这个div的宽有关系，于是我就将这个div的宽加宽，问题迎刃而解，但是新的问题来了，京东的div好像没有这么宽。于是陷入深思，这个宽度可能是ul继承了父标签的宽度的属性，导致的。然后改变无序列表的排列方式，就是一列一个无序列表，然后让每个无序列表定位。

这个方案看似比刚才的那个比较麻烦。但是如果我们细想HTML的定位关系，一个含有定位属性（也就是position：absolute；）的标签，如果该标签的父标签也含有这个属性，则该标签就会定位在这个父标签的左下方，如果该标签的父标签没有该属性，该标签就会向上寻找上一级的父标签，直到到body为止。

这样我们就可以让所有的ul标签定位在北京的这个div标签的左下方，然后对每个标签定位，就可以让每个ul标签分离了。同时注意li的宽度要保证他们覆盖否则当鼠标横向移动的时候这个ul标签就会隐藏。
总觉的差好多，等想起来了再补充。