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


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

<!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;(溢出隐藏)


.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;
            }



相关阅读:
在线创建站点怎么实现?
cubism.js 怎么用,在哪下载,没有思路
前端包管理器解决方案?
jsoup如何选出没有被隐藏的tr元素
scrapy shell 报错521
server第一次开正常不报错,关闭后报连接错误,第二次再开serve就启动不了,为什么?
正则表达式中/\b\b/出现空字符串个数问题
JS的操作顺序具体是怎样的?
全景展示有人做过吗?给点思路。。。
获取用户ip
屏幕分辨率变大后datatables不对齐如何解决?
Dockerfile build install mysql的时候,弹出输入root密码之后,没反应?
js中promise的嵌套问题
请教大家,我用cmake生成一个最简单的vs2010工程却报错?
eclipse cdt中是否可以和visual c++那样,调试的时候把当前运行箭头指向上下调整
PHP MVC框架如何把控制器值传到模型上?
父页面怎么判断iframe里页面的AJAX加载完成并重新计算高度?
请问 armeabi armeabi-v7a arm64v8a x86 x86_64 mips这些都是啥意思?
Lua协程使用困惑求解
用JS怎么控制tab标签页的默认tab



快速导航

Copyright © 2016 phpStudy |