觀察上圖不難發(fā)現(xiàn)，送至北京（上方div） 這部分的邊框情況是，上側(cè)無(wú)邊框，左右有邊框，而下側(cè)則不知道。

鼠標(biāo)指向后下方div（下方div）出現(xiàn)，四周都有邊框，除了與上方送至北京交接處，此時(shí)出現(xiàn)一個(gè)拐角，而這個(gè)拐角正是本文著重研究的。

怎樣形成這個(gè)拐角呢？或者說(shuō)怎樣讓交接的這部分看起來(lái)沒(méi)有邊框呢？

這里用到了一個(gè)z-index屬性，這個(gè)屬性是用來(lái)設(shè)置重疊邊框的優(yōu)先級(jí)，即誰(shuí)大誰(shuí)就在最上方顯示。

但是這個(gè)屬性生效有一個(gè)前提，必須設(shè)置定位屬性position。

所以，思路方向?yàn)?#xff0c;上方div邊框?yàn)榘咨?#xff0c;蓋住兩個(gè)div交接的部分即可。

而具體操作是怎樣的呢。

首先為了使地址可見(jiàn)，下方div的屬性absolute定位，而且z-index設(shè)置為10（可遮擋頁(yè)面下方其他div即可），且視奏都有邊框。

所以，接下來(lái)要做的

而上方div不僅僅是div這么簡(jiǎn)單，因?yàn)楦鶕?jù)京東的上方導(dǎo)航欄，地址這部分位置布局明顯是float設(shè)置的，而設(shè)置了float屬性之后，z-index屬性是無(wú)效的。

一層div顯然是無(wú)法滿足要求的，那么兩層呢，兩層div是可以完成這個(gè)效果（Runjs：http://runjs.cn/code/yzai73bs），但是上方地址欄的左邊同一行部分實(shí)際上存在一個(gè)圖標(biāo)，就是這個(gè)圖標(biāo)的存在決定了內(nèi)層div最好也是浮動(dòng)float屬性,那么此時(shí)有了另一種需求：3層div。

這個(gè)時(shí)候會(huì)發(fā)現(xiàn)3層div是有些臃腫的，那么有更好的方法嗎？

觀察原京東頁(yè)面后，發(fā)現(xiàn)這部分使用了ul列表，那么三層結(jié)構(gòu)就有了，ul與內(nèi)層div設(shè)置浮動(dòng)，li設(shè)置position+z-index>下方z-index+下方border邊框?yàn)閷?shí)體solid且顏色與整體面板相同，那么交界處的下方div的top邊框會(huì)被上方li的bottom邊框所遮蓋，整體效果就形成了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/wukall/p/5806408.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。