仿京东首页上侧导航左侧地址栏布局（1）

观察上图不难发现，送至北京（上方div） 这部分的边框情况是，上侧无边框，左右有边框，而下侧则不知道。

鼠标指向后下方div（下方div）出现，四周都有边框，除了与上方送至北京交接处，此时出现一个拐角，而这个拐角正是本文着重研究的。

怎样形成这个拐角呢？或者说怎样让交接的这部分看起来没有边框呢？

这里用到了一个z-index属性，这个属性是用来设置重叠边框的优先级，即谁大谁就在最上方显示。

但是这个属性生效有一个前提，必须设置定位属性position。

所以，思路方向为，上方div边框为白色，盖住两个div交接的部分即可。

而具体操作是怎样的呢。

首先为了使地址可见，下方div的属性absolute定位，而且z-index设置为10（可遮挡页面下方其他div即可），且视奏都有边框。

所以，接下来要做的

而上方div不仅仅是div这么简单，因为根据京东的上方导航栏，地址这部分位置布局明显是float设置的，而设置了float属性之后，z-index属性是无效的。

一层div显然是无法满足要求的，那么两层呢，两层div是可以完成这个效果（Runjs：http://runjs.cn/code/yzai73bs），但是上方地址栏的左边同一行部分实际上存在一个图标，就是这个图标的存在决定了内层div最好也是浮动float属性,那么此时有了另一种需求：3层div。

这个时候会发现3层div是有些臃肿的，那么有更好的方法吗？

观察原京东页面后，发现这部分使用了ul列表，那么三层结构就有了，ul与内层div设置浮动，li设置position+z-index>下方z-index+下方border边框为实体solid且颜色与整体面板相同，那么交界处的下方div的top边框会被上方li的bottom边框所遮盖，整体效果就形成了。

 

转载于:https://www.cnblogs.com/wukall/p/5806408.html