css - 如何把一個視圖放在左浮動定位的視圖的上面？
問題描述
我想把一個紅色的視圖放在左浮動視圖的上面，但是看不見了這個紅色視圖，下面是我的代碼，多謝指導。
<!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'> 左浮動</p><p class='red'> <p>絕對定位距底部80px</p></p> </p></body></html>
問題解答
回答1：樓主，你仔細看看你父元素wrapper的高度為多少？這是為什么呢？因為你yellow左浮動了，脫離文檔流，red絕對定位也已經(jīng)脫離文檔流了，所以你red定位在bottom：80px沒什么屌用，因為父元素高度都沒有，它上哪去找80px的底部來定位。所以，你要解決的方法就是，動用你勤勞的小手，給父元素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. 在應用配置文件 app.php 中找不到’route_check_cache’配置項2. html按鍵開關(guān)如何提交我想需要的值到數(shù)據(jù)庫3. mysql取模分表與分表4. HTML 5輸入框只能輸入漢字、字母、數(shù)字、標點符號？正則如何寫？5. gvim - 誰有vim里CSS的Indent文件, 能縮進@media里面的6. dockerfile - 我用docker build的時候出現(xiàn)下邊問題 麻煩幫我看一下7. 跟著課件一模一樣的操作使用tp6,出現(xiàn)了錯誤8. PHP類屬性聲明？9. objective-c - ios 怎么實現(xiàn)微信聯(lián)系列表 最好是swift10. javascript - 請教如何獲取百度貼吧新增的兩個加密參數(shù)
網(wǎng)公網(wǎng)安備