今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出。

百度后,才想起来... ...

position后,元素已经和父元素不在一个流里面了,而overflow只能对在同一流中的元素起作用。

简单说,

就是 table 已经是移民火星了,而table外面的div 依然还在地球,那么身在地球的div自然是管不了身在火星的table咯。

所以解决办法,

既然table移民了,那么它爹div也跟着移个民不就可以管着table了吗?

当子元素改变当前流后,父元素也跟着改变当前流,那么overflow就可以生效了。

下面引用一个例子:

<style>  

.box{  

    width:200px;  

    height:150px;  

    overflow:hidden;  

    border:2px solid #000;  

    float:left;  

    margin-right:20px;  

}  

.relative{  

    position:relative;  

}  

.div{  

    width:200px;  

    height:100px;  

    background:#FF5400;  

    margin-top:100px;  

    position:absolute;  

}  

.zi{  

    width:200px;  

    height:300px;  

    background:#FF0000;  

}  

</style>  

<div class="box">  

高300px的子元素溢出隐藏  

<div class="zi"></div>  

</div>  

<div class="box">  

不带relative  

<div class="div"></div>  

</div>  

<br><br><br><br><br><br>  

<div class="box relative">  

带上relative  

<div class="div"></div>  

</div>  

效果图:

请原谅我懒的自己写demo。借下别人的demo用用。

position:absolute溢出处理的更多相关文章

  1. 绝对定位常见误区:position:absolute相对于谁定位、及当溢出时怎么隐藏

    1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于pos ...

  2. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  3. 解决绝对定位div position: absolute 后面的<a> Link不能点击

    今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...

  4. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  5. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  6. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

  7. css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

  8. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  9. 关于position:absolute的困惑

    今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...

随机推荐

  1. Zookeeper 基本概念学习

    1.Zookeeper简介: 1) 中间件,为分布式系统提供协调服务 2) 作用于分布式系统,发挥其优势,可以为大数据服务 3) 支持Java,提供java和c语言的客户端api 2. 分布式系统 1 ...

  2. FireDAC探索 (二)

    又花时间试了试FireDAC,本想找到一些办法,让FireDAC取数据能和DBX样快,最终还是失败了,DBX实现是太快了,3472第记录(110个字段的表),0毫秒就抓过来了, FireDAC最快也要 ...

  3. 单机RedHat6.5+JDK1.8+Hadoop2.7.3+Spark2.1.1+zookeeper3.4.6+kafka2.11+flume1.6环境搭建步骤

    1.RHEL 6.5系统安装配置图解教程(rhel-server-6.5) 2.在Linux下安装JDK图文解析 3.RedHat6.5上安装Hadoop单机 4.RedHat6.5安装Spark单机 ...

  4. DRP端口描述

    DRP端口描述 1.信息来源 2.端口描述

  5. excel技巧--批量生成工资条

    要想生成如上图的工资条,快速的方法如下: 1.在工资表右侧建立一升序数字列,完成后再复制该列,重复粘贴一次在该列底部.2.对该表排序:“开始”-->“排序和筛选”-->自定义排序.在对话框 ...

  6. C++Builder 网站。记住学习

    http://www.ccrun.com/ C++Builder

  7. js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计

    说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...

  8. Azure SQL 数据库仓库Data Warehouse (2) 架构

    <Windows Azure Platform 系列文章目录> 在上一篇文章中,笔者介绍了MPP架构的基本内容 在本章中,笔者给大家介绍一下Azure SQL Data Warehouse ...

  9. Linux From Scratch [3]

    1. 为了编译glibc,我们需要kernel header. make mrproper # clean kernel tree make INSTALL_HDR_PATH=dest headers ...

  10. 统计apk或jar中方法数量

    一.apk中方法数量 ./android-sdk-linux/build-tools/23.0.2/dexdump -f  apk路径 | grep method_ids_size 二.jar中方法数 ...