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

说一下问题描述，最外面的父元素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. SQL Server登录 18456错误

    1.以windows验证模式进入数据库管理器. 第二步:右击sa,选择属性: 在常规选项卡中,重新填写密码和确认密码(改成个好记的).把强制实施密码策略去掉. 第三步:点击状态选项卡:勾选授予和启用. ...

  2. 如何判断 Android 应用的 Apk 签名是否一致？

    可以比对apk签名的fingerprint. 假定安装了JDK,如果想查HelloWorld.apk所使用的签名的fingerprint,可以这样做: 1. 查找apk里的rsa文件 (Windows ...

  3. 未能找到类型或命名空间“Compare”

    在用vs2012  .net Framework4.5  Mvc3做一个MVCMusicStore 的例子时,遇到这样一个问题 解决办法: 具体原因也不是很清楚,据说是引用Compare做验证时会有二 ...

  4. php 图片压缩

    /** * desription 判断是否gif动画 * @param sting $image_file图片路径 * @return boolean t 是 f 否 */ function chec ...

  5. Html笔记(十)XHTML XML

    XHTML 是可扩展的超文本标记语言(Extensible HyperText Markup Language). XHTML 是 w3c 组织在2000年的时候为了增强HTML推出的,本来是想替代H ...

  6. uvalive 3938 "Ray, Pass me the dishes!" 线段树 区间合并

    题意:求q次询问的静态区间连续最大和起始位置和终止位置 输出字典序最小的解. 思路:刘汝佳白书 每个节点维护三个值 pre, sub, suf 最大的前缀和, 连续和, 后缀和 然后这个题还要记录解的 ...

  7. HW4.6

    public class Solution { public static void main(String[] args) { final double MILES_PER_KILOGRAM = 1 ...

  8. strip, 关于去除目标文件种的不必要信息

    对于so动态库及可执行文件,可以直接调用不带参数的strip (-s, 即--strip-all)去除大多数不必要的信息.因为so库非常标准,所以strip之后仍然可以进行完美的动态连接:而可执行文件 ...

  9. Jetty 8长连接上的又一个坑

    Jetty 8 长连接的超时断开连接的机制:超时连接机制针对IO传输过程中的数据阻塞时间超过一定阈值时,断开该连接.阻塞指当前处于数据传输阶段,但是连续指定时间内都没有发出或者接收到任何数据时,Jet ...

  10. Yii2 富头像上传

    前台html: <div class="xz_img2 text-center"> <div class="images_flow" id=& ...