做一个点击查看显示详细信息的效果。

说一下问题描述，最外面的父元素overflow-parent设置了overflow:hidden，

然后子元素overflow-child没有设置overflow，设置了relative，为其包含的绝对定位的元素进行位置确定,这个元素点击时高度增加到300px.

<!doctype html>

<html>

<head>

<script src="jquery-1.9.1.min.js"></script>

<style>

.overflow-parent{

    width: 200px;

    height: 200px;

    border: 1px solid #ccc;

    overflow: hidden;

}

.overflow-child{

    position: relative;

    width: 100px;

    height: 198px;

    border: 1px solid blue;

}

.position{

    position: absolute;

    right: 10px;

    background: #000;

    bottom: top;

    top: 110px;

    z-index: 100;

    width: 50px;

    height: 50px;

}

.height{

    height:300px;

}

</style>

<script>

function addHeight(htmlObj){

    $(htmlObj).toggleClass("height");

}

</script>

</head>

<body>

<div class="overflow-parent">

    <div class="overflow-child">

        <div class="position" onclick="addHeight(this)">

        </div>

    </div>

</div>

</body>

</html>

效果图：

接下来点击这个绝对定位的元素，效果如下，我们发现没有超过包含的最终父元素overflow-parent。

然后把overflow-parent的overflow去掉，好了，结论是，我们做这个绝对定位和 堆叠时，要确定下其所有的祖先元素是否包含了overflow:hiden属性，不然的话，会发现无论怎么设置，都不会显示完全。

overflow:hiddden与绝对定位的应用场景的事例的更多相关文章

  1. CSS深入理解学习笔记之overflow

    1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...

  2. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  3. CSS 实现自适应正方形

    在处理移动端页面时,我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果,比如,商品详情页, 方法1.CSS3 vw单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw ...

  4. Css里的BFC

    一.BFC简介 BFC全称:Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的 ...

  5. Css3入门详解

    一.Css基本语法 1.Html和Css没分开时 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> ...

  6. 【原】移动web页面支持弹性滚动的3个方案

    有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动we ...

  7. flex上下固定中间滚动布局

    传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动 ...

  8. -webkit-overflow-scrolling : touch;快速滚动标签

    http://www.cnblogs.com/PeunZhang/p/3553020.html(链接出处,只是转载学习) 对于如何使用弹性滚动,这里并没有最好的方案,具体看产品的用户群.产品的定位等, ...

  9. CSS垂直居中精华总结

    1  table-cell方式 将center元素的包含框display设置为table,center元素的display设置为table-cell,vertical-align设置为middle. ...

随机推荐

  1. iOS7 iOS8 毛玻璃效果的分别实现

    iOS8用系统的, iOS7用第三方的(效果还是挺快的.) https://github.com/KiranPatel-iOS/KPBlurEffect [_headBGIV sd_setImageW ...

  2. 如何在VS 2010中使用 VS2013的解决方案

    今天要用VS2010打开VS2013,一直觉得VS2010到VS2012只是界面上扁平化的改变,平台工具集有改变但很大程度上可能向上兼容.在网上搜了一些文章,其中有一篇说到一个观点:        从 ...

  3. HDU4725 The Shortest Path in Nya Graph dij

    分析:对于每一层,原来n个点,然后扩展为原来的三倍,每一层扩展一个入点,一个出点,然后跑最短路 注:tmd我把一个n写成m了,然后wa了7次,我都要怀疑人生了 #include<cstdio&g ...

  4. [King.yue]关于CSLA框架的一些看法

    CSLA.Net 是一个有帮助的成熟开发框架,但不适于初学者.该框架支持在任何地方.任何时间创建对象,值得我们花时间去学习了解这一框架.CSLA.Net 框架设计的业务对象,支持对完全透明的数据源进行 ...

  5. Phonegap3.4 教程

    英文原扯:http://coenraets.org/blog/cordova-phonegap-3-tutorial/ 我只是对着原文学习一遍,记录在这里,一来为了加深印象(边翻译边学习),二来为了自 ...

  6. NOIP2000 单词接龙

    题三．  单词接龙                (27分)    问题描述    单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的 ...

  7. UVA11324 The Largest Clique(DP+缩点)

    题意:给一张有向图G,求一个结点数最大的结点集,使得该结点中任意两个结点 u 和 v满足:要么 u 可以到达 v, 要么 v 可以到达 u(u 和 v 相互可达也可以). 分析:”同一个强连通分量中的 ...

  8. xp系统下网络打印机怎么设置

    亲测,可行 打印机共享可以有效节约办公资源,提高办公效率.可是还有很多朋友不知道怎么设置,我们这里讲一下网络打印机的设置方法. 1.我们点开桌面左下角的开始菜单,选择“打印机和传真” 2.我们右击某个 ...

  9. （原）Struts 相关资源下载

    官网:http://struts.apache.org 点击[Download],进入页面如下,可以看到下载的资源: 点击[struts-2.3.20-all.zip],就能获取Struts2项目所有 ...

  10. 【原创】MapReduce计数器

    MapReduce框架内置了一些计数器的支持,当然,我们也可以设置自己的计数器用来满足一些特殊的要求. 其实计数器可以用来完成很多事,关键要看你如何用,例如你想知道map输入数据的指定记录特定的信息有 ...