若父设置了overflow: hidden;子如何不受影响

1.如图：

2.只需要给一个position: absolute;定位

3.相当于重新给页面进行定位，右侧便会有滚动条出现。

4.overflow属性：

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

若父设置了overflow: hidden;子如何不受影响的更多相关文章

  1. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  2. IE下设置body{overflow:hidden;}失效Bug

    问题重现: <p>There are no scrollbars on this page in sane browsers</p> html, body, p { margi ...

  3. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  4. [css]当父元素的margin-top碰上子元素的margin-top

    出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...

  5. CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  6. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. border-radius导致overflow:hidden失效问题。

    如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...

  8. overflow: hidden用法，不仅仅是隐藏溢出

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...

  9. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

随机推荐

  1. apache的性能调配 MaxClients 与MaxRequestsPerChild

    因近期服务不稳定,现象和这个比较类似http://hi.baidu.com/xinfeng999/blog/item/1aea470e214ab1cd7acbe1ed.html根据现象来对APACHE ...

  2. Effective Java 第三版——46. 优先考虑流中无副作用的函数

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  3. MemoryFile偷取安卓内存

    参考链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0111/3859.html MemoryFile memoryFile ...

  4. [Big Data - ELK] ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台

    ELK平台介绍 在搜索ELK资料的时候,发现这篇文章比较好,于是摘抄一小段: 以下内容来自: http://baidu.blog.51cto.com/71938/1676798 日志主要包括系统日志. ...

  5. oracle数据泵笔记

    1.创建目录 查询已有目录:select * from dba_directories 创建并授权: CREATE DIRECTORY dump_dir AS '/tmp/' grant read,w ...

  6. 截图工具（window 10 和Mac OSX）

      Win10上截图 1.使用系统截图工具 所有程序中可以看到 通过win+R,打开运行,输入"SnippingTool" 文件位于: C:\Windows\System32\Sn ...

  7. 学习MongoDB(Troubleshoot Replica Sets) 集群排除故障

    Test Connections Between all Members(集群中节点网络测试) 在进行Mongodb集群时,每个节点的网络都需要互动,假设有3个服务器节点. m1.example.ne ...

  8. ZigBee基础

    Zigbee技术 Zigbee由Zigbee联盟制定的无线网络协议,在IEEE 802.15.4标准的基础上设计,是一种自愈.安全和稳健的网状网协议,可扩展到更大范围内的数百个节点.主要用于距离短.功 ...

  9. Android 测试入门之---Monkey test

    这周重点学习的也是Android monkey test 的一些相关知识,也对其进行了初步的操作和试验.讲学习资料整理如下 : Monkey是一个命令行工具 ,可以运行在模拟器里或实际设备中.它向系统 ...

  10. hdoj：2022

    #include <iostream> #include <string> using namespace std; int main() { int m, n; int x, ...