在做一个下拉框的动画效果中遇到了这个bug，记录一下。

在写下拉框的动画的时候，一般我们的做法都是把下拉框的外盒子设为overflow:hidden，然后设下外层盒子高度，之后通过js慢慢的改变高度从而达到动画效果。

那么有时候我们设overflow:hidden的时候可能会遇到这样的bug。

首先上一个正常的版本

但是呢，当我们给子元素设了absolute的时候，此时我们的overflow:hidden就不起作用了

此时需要给我们的父元素设上相应的定位才能使得hidden生效

overflow:hidden与position:absolute的更多相关文章

  1. overflow hidden 遇上absolute失效

    原文地址 背景 这几天开发的时候遇到了个问题,如图1. 写了个demo 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM要求能够显示最后一个完整的标签. 当在iPhone5手机上查看页 ...

  2. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  3. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

  4. css中：overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  5. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  6. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  7. CSS Overflow:hidden

    终于知道为什么要设置OverFlow:Hidden了, 看代码: <div id="wrapper"> <figure class="img-wrapp ...

  8. display:none,overflow:hidden,visibility:hidden之间的区别

    一,display:none; 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着) 二,overflow:hidden; 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高 ...

  9. 关于css中overflow:hidden的使用

    overflow:hidden有两个用处经常用到: 1.通过设定自身的高度,加上overflow:hidden可以隐藏超过容器本身的内容:     但是,小编在以往的使用中,发现了一个问题,只要父级容 ...

随机推荐

  1. light oj 1047-neighbor house

    ime Limit:500MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Description The people ...

  2. vim下设置tab

    前言:大多数情况下tab键的宽度设置为4个空格,这个可以根据自己 的代码风格进行替换,然而当你提交不同的语言的代码的时候python 和c的时候就有区别了.c的话一般tab键做缩进,而python提交 ...

  3. 浏览器与服务器间的交互（客服端 <---> 服务器）

    浏览器与服务器间的交互(客服端 <---> 服务器) 请求--->处理--->响应 对类HttpContext 内部成员的使用 例如 :Request .Response .  ...

  4. iOS 开发设计常用软件及工具整理

    1, xCode 2, AppCode 3, Skech 原型设计软件 4, Hype 动画设计工具 5, fontawsome 免费图表 6, Prepo icon, images.catlog 生 ...

  5. Executor框架

     Executor框架是指java5中引入的一系列并发库中与executor相关的功能类,包括Executor.Executors.ExecutorService.CompletionService. ...

  6. JVM--Garbage First

    Garbage First Garbage First 简称 G1,它的目标是要做到尽量减少 GC 所导致的应用暂停的时间,让应用达到准实时的效果,同时保持 JVM 堆空间的利用率,其最大的特色在于允 ...

  7. (step8.2.2)hdu 2509(Be the Winner——简单博弈)

    题目大意:输入一个整数n,表示火柴堆数(原题其实指的是苹果堆数,但是为了尽量与模板保持一致,所以在这里理解为火柴堆数....其实理解为什么都没关系, 重要的是,理解就行....).在接下来的一行中,有 ...

  8. GREENPLUM简单介绍

    原帖:http://www.itpub.net/thread-1409964-1-1.html 什么是GREENPLUM? 对于非常多IT人来说GREENPLUM是个陌生的名字.简单的说它就是一个与O ...

  9. 关于DataGridViewComboBoxCell修改后提交数据源

    最近在项目遇到一个功能实现.是在DataGridView中DataGridViewComboboxColumn列绑定数据源, DisplayMember为数据表的Name列,ValueMember是数 ...

  10. Cocos2D-X扫盲之坐标系、锚点

    一.引言 在Cocos2D-X的开发过程中,经常会碰到设置精灵位置的问题.而设置位置的过程,涉及到两个问题:第一是坐标系,包括原点的位置.X/Y坐标轴的方向灯:第二是基准点(Cocos2D-X中叫锚点 ...