在前端開發(fā)中，經(jīng)常會(huì)遇到需要使用CSS樣式控制元素位置的情況。而其中一個(gè)最常用的屬性便是top。通過設(shè)置top，可以讓元素相對(duì)于其父元素的頂部偏移一定的距離。然而，有時(shí)候會(huì)遇到top設(shè)置不起作用的情況，其中一個(gè)常見的問題就是top 20%不生效。

.parent {
position: relative;
}
.child {
position: absolute;
top: 20%;
}

上面的代碼表示一個(gè)父元素（parent）和一個(gè)子元素（child），子元素的top被設(shè)置為20%。按照正常情況，這個(gè)子元素應(yīng)該距離父元素頂部的距離為父元素高度的20%。但是，在實(shí)際開發(fā)中，有時(shí)候這個(gè)樣式設(shè)置會(huì)無法生效。

造成這種情況的原因有很多，其中最常見的是父元素沒有確切地設(shè)置高度。在這種情況下，由于無法準(zhǔn)確算出父元素的高度，導(dǎo)致瀏覽器無法正確計(jì)算子元素距離頂部的距離。所以，最好的解決方法就是確切地設(shè)置父元素的高度。

.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
top: 20%;
}

上面的代碼中，父元素的高度被設(shè)置為300像素。這樣，瀏覽器就能正確地計(jì)算子元素相對(duì)于父元素頂部的距離了。另外，還要注意的是，如果父元素里還有其他的浮動(dòng)元素或者絕對(duì)定位元素，也可能會(huì)影響到top的設(shè)置效果，需要進(jìn)一步的調(diào)整。

總的來說，盡管top 20%不生效可能會(huì)讓你感到困惑，但是只需要仔細(xì)地檢查代碼，確認(rèn)父元素的高度和其他元素的定位關(guān)系都被設(shè)置正確，就能夠解決這個(gè)問題。