溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
最近工作中做了幾件事情都與頁(yè)面元素定位相關(guān)，所以這里將工作中遇到的問(wèn)題以及解決方法記錄在博客里，以便日后查閱。
疊壓
有一個(gè)任務(wù)是做一個(gè)列表組件，列表中的每一行都要向上疊壓上一行的底邊，注意，是疊壓，不是接壤。
問(wèn)題分析：
利用相對(duì)定位（position:relative）來(lái)制造相對(duì)于行（row）的偏移量，使行內(nèi)元素向上偏移，并疊壓上一行的行內(nèi)元素的底邊。
既然是相對(duì)定位，那就不能讓每一行的定位基準(zhǔn)點(diǎn)基于上一行的底邊。因?yàn)?，基?zhǔn)點(diǎn)不會(huì)因?yàn)樯弦恍性乇籆SS搞過(guò)之后而同時(shí)發(fā)生偏移。
舉例說(shuō)明：2個(gè)div上下排列，第一個(gè)div（class="div1"）height為100px，并且向上偏移-10px。第二個(gè)div（class="div2"）height也是100px，希望疊壓到div1的底邊10px，所以也設(shè)置了top: -10px。如果div1的基準(zhǔn)點(diǎn)Y軸坐標(biāo)=0px，那么，在div1沒(méi)有發(fā)生偏移的情況下，div2的基準(zhǔn)點(diǎn)Y軸坐標(biāo)= div1.top + div1.height，也就是0px + 100px = 100px。現(xiàn)在，div1.top = -10px，即向上偏移10px，按理說(shuō)，div2的基準(zhǔn)點(diǎn)= -10px + 100px = 90px?？上ВF(xiàn)實(shí)并非如此。div2的基準(zhǔn)點(diǎn)并沒(méi)有任何改變。所以，div2.top = -10px 依舊無(wú)法疊壓到div1的底邊。只有當(dāng)div2.top=-20px才可能疊壓到div1底邊10px處。有人說(shuō)此處應(yīng)該讓div1的高度增加10px，這樣，div2就能疊壓到div1了。我做了嘗試，發(fā)現(xiàn)當(dāng)div1的高度增加10px后，div2的原始基準(zhǔn)點(diǎn)Y軸坐標(biāo)也跟著+10px。如此，重新套用公式：div2的定位基準(zhǔn)點(diǎn)Y軸坐標(biāo) = div1的定位基準(zhǔn)點(diǎn)Y軸坐標(biāo) + div1高度，重新得到div2的定位基準(zhǔn)點(diǎn)Y軸坐標(biāo)為110px。110px-10px的向上偏移量=100px，而div1雖然高度增加到了110px，可是它向上偏移了-10px，div2還是疊壓不到div1的底邊。
解決思路：
就像問(wèn)題分析中開(kāi)頭說(shuō)的那樣，解決方法很簡(jiǎn)單，就是不要讓后續(xù)元素的定位基準(zhǔn)點(diǎn)基于前一個(gè)會(huì)改變位置的元素。如下圖：
上圖是原先的元素排列結(jié)構(gòu)。這種結(jié)構(gòu)中，每個(gè)要向上偏移的元素定位基準(zhǔn)點(diǎn)就是上一個(gè)也需要變動(dòng)位置的元素的左下角。這樣是不能實(shí)現(xiàn)我們的需求的。只要在元素結(jié)構(gòu)上稍加改變，就可以了。下圖是結(jié)構(gòu)改造后的元素結(jié)構(gòu)：
在原來(lái)每個(gè)元素內(nèi)部再添加一個(gè)box元素（藍(lán)色元素）。將偏移設(shè)置在這個(gè)box元素上。因?yàn)槊總€(gè)淺藍(lán)色的box元素都是基于其上層box元素（黑色邊框的div）的，而非前面一個(gè)需要變動(dòng)位置的box元素，所以每個(gè)淺藍(lán)色的box元素進(jìn)行偏移時(shí)、增加高度時(shí)，都不會(huì)改變下一個(gè)淺藍(lán)色box的定位基準(zhǔn)點(diǎn)。而且，每個(gè)淺藍(lán)色box元素的高度增加，也不會(huì)導(dǎo)致其上層box元素（黑色邊框的div）高度改變，因?yàn)闇\藍(lán)色box元素改變了其top屬性后，它就被認(rèn)為是個(gè)浮動(dòng)元素。一個(gè)浮動(dòng)元素不會(huì)撐大包含它的上層box元素。所以第二個(gè)黑框div，以及第三個(gè)黑框div的定位基準(zhǔn)點(diǎn)都不會(huì)發(fā)生改變。如此一來(lái)，我們便可以實(shí)現(xiàn)淺藍(lán)色box元素相互疊壓的效果了。
實(shí)現(xiàn)代碼：
<!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>免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼