position:absolute溢出处理
今天在做布局的时候发现把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溢出处理的更多相关文章
- 绝对定位常见误区:position:absolute相对于谁定位、及当溢出时怎么隐藏
1.绝对定位元素溢出父元素,怎么隐藏问题? 通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏! 但是,对于pos ...
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- 解决绝对定位div position: absolute 后面的<a> Link不能点击
今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...
- position absolute 绝对定位 设置问题
今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
- css position:absolute 如何居中对齐
写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center
- 【总结】我所整理的float, inline-block还有position:absolute
这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...
- 关于position:absolute的困惑
今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...
随机推荐
- Zookeeper 基本概念学习
1.Zookeeper简介: 1) 中间件,为分布式系统提供协调服务 2) 作用于分布式系统,发挥其优势,可以为大数据服务 3) 支持Java,提供java和c语言的客户端api 2. 分布式系统 1 ...
- FireDAC探索 (二)
又花时间试了试FireDAC,本想找到一些办法,让FireDAC取数据能和DBX样快,最终还是失败了,DBX实现是太快了,3472第记录(110个字段的表),0毫秒就抓过来了, FireDAC最快也要 ...
- 单机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单机 ...
- DRP端口描述
DRP端口描述 1.信息来源 2.端口描述
- excel技巧--批量生成工资条
要想生成如上图的工资条,快速的方法如下: 1.在工资表右侧建立一升序数字列,完成后再复制该列,重复粘贴一次在该列底部.2.对该表排序:“开始”-->“排序和筛选”-->自定义排序.在对话框 ...
- C++Builder 网站。记住学习
http://www.ccrun.com/ C++Builder
- js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计
说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...
- Azure SQL 数据库仓库Data Warehouse (2) 架构
<Windows Azure Platform 系列文章目录> 在上一篇文章中,笔者介绍了MPP架构的基本内容 在本章中,笔者给大家介绍一下Azure SQL Data Warehouse ...
- Linux From Scratch [3]
1. 为了编译glibc,我们需要kernel header. make mrproper # clean kernel tree make INSTALL_HDR_PATH=dest headers ...
- 统计apk或jar中方法数量
一.apk中方法数量 ./android-sdk-linux/build-tools/23.0.2/dexdump -f apk路径 | grep method_ids_size 二.jar中方法数 ...