在做一个下拉框的动画效果中遇到了这个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. Java中static、final用法

    一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...

  2. ThinkPHP - 自定义标签库 - 标签驱动

    ThinkPHP 官方文档:http://document.thinkphp.cn/manual_3_2/taglib_driver.html 创建一个类,继承自TagLib类: <?php / ...

  3. Codeforces Round #315 (Div. 2A) 569A Music （模拟）

    题目:Click here 题意:(据说这个题的题意坑了不少人啊~~~)题目一共给了3个数---- T 表示歌曲的长度(s).S 表示下载了歌曲的S后开始第一次播放(也就是说S秒的歌曲是事先下载好的) ...

  4. ARM异常---一个DataAbort的触发过程：

    一个DataAbort异常的触发过程://////////////////////////////xxxx.inc_STACK_BASEADDRESS EQU 0x33ff8000_MMUTT_STA ...

  5. 循环调用修正sic86

    create or replace procedure rebuild_sic86_wyl(pi_aac001 in number, po_fhz out varchar2, po_msg out v ...

  6. poj 1363 Rails in PopPush City &&【求堆栈中合法出栈顺序次数】

    问题如下: 问题 B: Rails 时间限制: Sec 内存限制: MB 提交: 解决: [提交][状态][讨论版] 题目描述 There is a famous railway station in ...

  7. 函数嵌套 lisp表达式求值

    问题 D: lisp表达式求值 时间限制: 1 Sec  内存限制: 128 MB提交: 105  解决: 43[提交][状态][讨论版] 题目描述 lisp是一种非常古老的计算机语言,是由约翰·麦卡 ...

  8. CRC校验

    小试一下CRC校验的verilog实现,采用最stupid的直接法. /* date : 2014/06/06 designer : pengxiaoen virsion : Altera-Model ...

  9. JAVA学习中好网站 - -

    http://www.54bk.com 我是博客 http://www.java-cn.com java中文网 http://java.sun.com sun官方网站 http://www.comej ...

  10. 雅虎UED--无障碍网页设计

    转自:http://www.sharetk.com/html/ued/Interactive-Design/1394.html 随着web使用量的增加和人们网络意识的增强,一些特殊用户开始被我们所关注 ...