html absolute溢出,position:absolute溢出处理

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

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

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

简单说，

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

所以解决办法，

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

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

下面引用一个例子：

.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;

}

高300px的子元素溢出隐藏

不带relative

带上relative

效果图：

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

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

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

position:absolute/relative/fixed小结

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

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

今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的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的困惑

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

随机推荐

【转载】C/C++之回调函数

[转载地址]:http://www.cnblogs.com/chenyuming507950417/archive/2012/01/02/2310114.html 在理解“回调函数”之前,首先讨论下函 ...

很久之前写的Ajax库

很久之前写的一个小型AJAX的js,放在上面以免以后想玩了找不到了. // version : 0.1 beta // author : __Ajax function __Ajax(url,opti ...

HDU 2647 Reward(图论-拓扑排序)

Reward Problem Description Dandelion's uncle is a boss of a factory. As the spring festival is comin ...

MySQL数据库优化_limit_1

转自:https://blog.youkuaiyun.com/cbjcry/article/details/70155118 1. MySQL中,在某些情况下,如果明知道查询结果只有一个,SQL语句中使用LIMI ...

移动端 meta 必备

将页面宽度到跟手机宽度比例相同,在手机上不能用手缩放