css - 如何把一个视图放在左浮动定位的视图的上面？
本文介绍了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>
<div class="wrapper">
<div class="yellow">
左浮动
</div>
<div class="red">
<p>绝对定位距底部80px</p>
</div>
</div>
</body>
</html>解决方案
楼主，你仔细看看你父元素wrapper的高度为多少？这是为什么呢？因为你yellow左浮动了，脱离文档流，red绝对定位也已经脱离文档流了，所以你red定位在bottom：80px没什么屌用，因为父元素高度都没有，它上哪去找80px的底部来定位。
所以，你要解决的方法就是，动用你勤劳的小手，给父元素wrapper加上overflow:hidden;(溢出隐藏)
这篇关于css - 如何把一个视图放在左浮动定位的视图的上面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
