如何把一个视图放在左浮动定位的视图的上面?

nick
  • 91

我想把一个红色的视图放在左浮动视图的上面,但是看不见了这个红色视图,下面是我的代码,多谢指导。

<!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>
回复
阅读 2.5k
2 个回答

楼主,你仔细看看你父元素wrapper的高度为多少?这是为什么呢?因为你yellow左浮动了,脱离文档流,red绝对定位也已经脱离文档流了,所以你red定位在bottom:80px没什么屌用,因为父元素高度都没有,它上哪去找80px的底部来定位。
所以,你要解决的方法就是,动用你勤劳的小手,给父元素wrapper加上overflow:hidden;(溢出隐藏)

.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;
            }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏