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. docker 下面创建的IMAGE 他们的 ID 一样？这个是怎么回事？？？？2. 在应用配置文件 app.php 中找不到’route_check_cache’配置项3. javascript - 关于mongose删除一次多个字段的问题4. 微信浏览器怎么取消缓存？5. javascript - vue-cli与后端框架集成config/index.js配置问题6. javascript - 为什么我无法通过$stateParams在父子State之间传递参数？跟State之间的父子关系有关吗？7. 关于layuiadmin中表格按钮提交问题求解！！！！8. html按键开关如何提交我想需要的值到数据库9. css - BEM 中块(Block)有木有什么标准 何时决定一个部分提取为块而不是其父级的元素呢(Element)?~10. html5 - 用Egret写的小游戏，怎么分享到微信呢？
网公网安备