理解CSS的position:relative
疊壓
有一個任務是做一個列表組件，列表中的每一行都要向上疊壓上一行的底邊，註意，是疊壓，不是接壤。
問題分析：
利用相對定位（position:relative）來制造相對於行（row）的偏移量，使行內元素向上偏移，並疊壓上一行的行內元素的底邊。
既然是相對定位，那就不能讓每一行的定位基準點基於上一行的底邊。因為，基準點不會因為上一行元素被CSS搞過之後而同時發生偏移。
舉例說明：2個div上下排列，第一個div（class="div1"）height為100px，並且向上偏移-10px。第二個div（class="div2"）height也是100px，希望疊壓到div1的底邊10px，所以也設置了top: -10px。如果div1的基準點Y軸坐標=0px，那麽，在div1沒有發生偏移的情況下，div2的基準點Y軸坐標= div1.top + div1.height，也就是0px + 100px = 100px。現在，div1.top = -10px，即向上偏移10px，按理說，div2的基準點= -10px + 100px = 90px。可惜，現實並非如此。div2的基準點並沒有任何改變。所以，div2.top = -10px 依舊無法疊壓到div1的底邊。只有當div2.top=-20px才可能疊壓到div1底邊10px處。有人說此處應該讓div1的高度增加10px，這樣，div2就能疊壓到div1了。我做了嘗試，發現當div1的高度增加10px後，div2的原始基準點Y軸坐標也跟著+10px。如此，重新套用公式：div2的定位基準點Y軸坐標
解決思路：
就像問題分析中開頭說的那樣，解決方法很簡單，就是不要讓後續元素的定位基準點基於前一個會改變位置的元素。如下圖：
這時原先的元素排列結構。這種結構中，每個要向上偏移的元素定位基準點就是上一個也需要變動位置的元素的左下角。這樣是不能實現我們的需求的。只要在元素結構上稍加改變，就可以了，見下圖，改變後的元素結構：
在原來每個元素內部再添加一個box元素。將偏移設置在這個box元素上。因為每個淺藍色的box元素都是基於其上層box元素（黑色邊框的div）的，而非前面一個需要變動位置的box元素，所以每個淺藍色的box元素進行偏移時、增加高度時，都不會改變下一個淺藍色box的定位基準點。而且，每個淺藍色box元素的高度增加，也不會導致其上層box元素（黑色邊框的div）高度改變，因為淺藍色box元素改變了其top屬性後，它就被認為是個浮動元素。一個浮動元素不會撐大包含它的上層box元素。所以第二個黑框div，以及第三個黑框div的定位基準點都不會發生改變。如此一來，我們便可以實現淺藍色box元素相互疊壓的效果了。
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 20px;
}
.nav-menu-bar {
height: 500px;
width: 350px;
overflow-x: auto;
}
.menu-item-slot {
height: 50px;
width: 100%;
}
.nav-menu-bar .menu-item {
background-color: rgba(128,176,224, 1.0); /*rgba()#6699cc;*/
border-radius: 8px 8px 0px 0px;
box-shadow: 0px -5px 5px -2px #375e8c;
position: relative;
top: -8px;
height: 58px; /* ------ Be careful ------ */
width: 100%;
overflow: hidden;
}
.menu-item .content {
margin-top: 8px;
margin-left: 8px;
width: 94%;
height: 72%;
vertical-align: top;
overflow-x: hidden;
color: #fafafa;
}
.nav-menu-bar .menu-item-slot:hover {
transition: height 0.3s;
height: 200px;
}
.nav-menu-bar .menu-item-slot:first-child:hover {
transition: height 0.3s;
height: 208px;
}
.nav-menu-bar .menu-item-slot:first-child .menu-item:hover {
transition: height 0.3s;
height: 208px;
}
.nav-menu-bar .menu-item:hover {
transition: height 0.3s;
height: 208px;
}
.nav-menu-bar .menu-item-slot:first-child {
height: 58px;
}
.nav-menu-bar .menu-item-slot:first-child .menu-item {
box-shadow: none;
top: 0px;
}
.nav-menu-bar .menu-item-slot:last-child .menu-item {
border-radius: 8px 8px 8px 8px;
}
</style>
</head>
<body>
<div class="nav-menu-bar">
<div class="menu-item-slot">
<div class="menu-item">
<div class="content">Created in 1998, its name is derived from the World Wide Web,</div>
</div>
</div>
<div class="menu-item-slot">
<div class="menu-item">
<div class="content">Created in 1998, its name is derived from the World Wide Web,</div>
</div>
</div>
<div class="menu-item-slot">
<div class="menu-item">
<div class="content">Created in 1998, its name is derived from the World Wide Web,</div>
</div>
</div>
<div class="menu-item-slot">
<div class="menu-item"></div>
</div>
</div>
</body>
</html>理解CSS的position:relative