觀察上圖不難發現，送至北京（上方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

總結

以上是生活随笔為你收集整理的仿京东首页上侧导航左侧地址栏布局（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。