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绝对定位也已经脱离文档流了,所以你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; }
相关文章:
1. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE语法实现存在即更新应该使用哪个标签?2. mysql - 怎么生成这个sql表?3. mysql储存json错误4. 哭辽 求大佬解答 控制器的join方法怎么转模型方法5. mysql - 表名称前缀到底有啥用?6. Navicat for mysql 中以json格式储存的数据存在大量反斜杠,如何去除?7. 编辑成功不显示弹窗8. 怎么php怎么通过数组显示sql查询结果呢,查询结果有多条,如图。9. mysql - 数据库表中,两个表互为外键参考如何解决10. sql语句 - 如何在mysql中批量添加用户?
