css - 如何把一個(gè)視圖放在左浮動(dòng)定位的視圖的上面？
問(wèn)題描述
我想把一個(gè)紅色的視圖放在左浮動(dòng)視圖的上面，但是看不見(jiàn)了這個(gè)紅色視圖，下面是我的代碼，多謝指導(dǎo)。
<!DOCTYPE html><html lang='en'><head> <title>Heors - How To Convert a PSD Template TO HTML5/CSS3</title> <meta charset='utf-8'> <meta name='author' content='pixelhint.com'> <meta name='description' content='Heros - Learn How To Convert a PSD Template TO HTML5/CSS3'/><style media='screen'> .red {width: 300px;position: absolute;text-align: center;bottom: 80px;z-index: 9999;background-color: red; } .wrapper {width: 300px;height: auto;position: relative; } .yellow{width: 300px;float: left; height: 600px; background-color: yellow; }</style></head><body> <p class='wrapper'><p class='yellow'> 左浮動(dòng)</p><p class='red'> <p>絕對(duì)定位距底部80px</p></p> </p></body></html>
問(wèn)題解答
回答1：樓主，你仔細(xì)看看你父元素wrapper的高度為多少？這是為什么呢？因?yàn)槟銀ellow左浮動(dòng)了，脫離文檔流，red絕對(duì)定位也已經(jīng)脫離文檔流了，所以你red定位在bottom：80px沒(méi)什么屌用，因?yàn)楦冈馗叨榷紱](méi)有，它上哪去找80px的底部來(lái)定位。所以，你要解決的方法就是，動(dòng)用你勤勞的小手，給父元素wrapper加上overflow:hidden;(溢出隱藏)
回答2：.red {width: 300px;position: absolute;text-align: center;bottom: 80px;z-index: 9999;background-color: red; } 改成： .red {width: 300px;position: absolute;text-align: center;top: 0;z-index: 9999;background-color: red; }
相關(guān)文章：
1. angular.js - angularjs的自定義過(guò)濾器如何給文字加顏色？2. angular.js - angular內(nèi)容過(guò)長(zhǎng)展開(kāi)收起效果3. 關(guān)于docker下的nginx壓力測(cè)試4. docker鏡像push報(bào)錯(cuò)5. 關(guān)于nginx location配置的問(wèn)題，root到底是什么6. linux - openSUSE 上,如何使用 QQ?7. 并發(fā)模型 - python將進(jìn)程池放在裝飾器里為什么不生效也沒(méi)報(bào)錯(cuò)8. 大家好，請(qǐng)問(wèn)在python腳本中怎么用virtualenv激活指定的環(huán)境？9. python的前景到底有大？如果不考慮數(shù)據(jù)挖掘，機(jī)器學(xué)習(xí)這塊？10. linux - 升級(jí)到Python3.6后GDB無(wú)法正常運(yùn)行?
網(wǎng)公網(wǎng)安備