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


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

<!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



快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 爱您,就像您爱我一样 午后的漫步时光作文100字 我佩服的一个人——“芝麻官”_关于描写班干部的小学生作文700字 寒冬一文 小学消防安全应急处理预案 范玮琪《最初的梦想》歌词 暑假里,我流过泪 XX县关于进一步完善民意表达机制的实施意见 2006年中考语文总复习·说明文阅读·考点讲解(二) 糖多令(吴江中秋) 发挥群体研训智慧 提高整体研训水平 我和成功的距离作文 2013年年度师范生实习支教最新工作总结 阿三 项目团队建设“四戒” 海燕和潜鸟作文200字 亲爱的,我是爱你的 香蕉味香油椒盐奶茶 一定要输得起 2015医学论文范文 阅读,我的最爱作文600字 描写人物眼睛的好句佳句 重归原点 办公室美女族 职场生存你们靠能力还是靠漂亮 在中国共产党建党周年纪念日上的讲话 小学二年级作文:我的爸爸(3篇) 散文诗:金人捧露盘*舞蹁跹 高中高一作文1200字:回望卧龙 一个人睡觉作文500字 我写我作 幸福的技巧 2014年“三八妇女节”红领巾广播稿 春天,你真美作文450字 《早教》不一样的家庭不一样的童年 2月14日情人节祝福短信76 (搞笑顺口溜)御寒妙招 论当代国际分工的深化及其对世界经济格局的影响. 生活杂感作文500字 2016学习谷文昌先进事迹精神心得体会7篇 小学六年级作文900字:书—我的好朋友 后会无期° 我的手表作文400字 开业祝福语 经典开业贺词 学习习总书记党的新闻舆论工作重要讲话心得体会:唱响主旋律传播正能量 《垓下之围》译文 从我国外贸结构看我国外贸依存度问题以及政策建议 小学五年级作文450字:儿时趣事 [原创]最后的距离作文1200字 带着感恩的心上路

Copyright © 2016 phpStudy |