在做一个下拉框的动画效果中遇到了这个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. Treap的读书笔记2

    近期開始了自己高级数据结构之旅,在这次旅行中.我将持续把一些高级的数据结构从理论到编码都过一遍,同一时候通过博客形式分享出来.希望大家指出不足之处! 二叉排序树是一种动态排序的数据结构.支持插入.删除 ...

  2. 【JUnit4.10源码分析】5 Statement

    假设要评选JUnit中最最重要的类型.或者说核心,无疑是org.junit.runners.model.Statement.Runner等类型看起来热闹而已. package org.junit.ru ...

  3. IIS express 7.5 配置和多网站执行

    iis express7.5 支持xp 以上的操作系统,能够解决xp.iis的问题. 首先先下载安装iisexpress7.5地址是id=1038">点击打开链接下载完毕点击安装就可以 ...

  4. Java面试题之一

    下面也将收集一些经典的java面试题,琢磨这些面试题还是非常有好处,可以弄清楚一些容易混淆的知识点,下面面试题的答案部分来自网络,有些来自自己的理解,都是自己精心归纳整理的,有问题的地方,希望大家指出 ...

  5. Jquery Ajax时 error处理 之 parsererror

    Jquery Ajax时 error处理 之 parsererror     01 $.ajax({ 02         type: "POST", 03         con ...

  6. vim下使用YouCompleteMe实现代码提示、补全以及跳转设置

    配置YouCompleteMe 1. 安装vundle vundle是一个管理vim插件的工具,使用vundle安装YouCompleteMe比较方便. 按照作者在https://github.com ...

  7. 【Eclipse】修改项目访问名称

    Properties --> Web Project Settings --> Context root --> 输入想要用的名称(默认是项目名)

  8. ContentType

    常用的 ContentType XML <% response.ContentType ="text/xml" %>  GIF images <% respons ...

  9. ｃ语言中malloc realloc 和calloc的联系与区别

    (1)C语言跟内存分配方式 <1>从静态存储区域分配.       内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量.static变量.<2> ...

  10. Android编程心得-设计一个可重用的自定义Dialog

            我们在实际开发过程中,会遇到一个问题,我们的Dialog如果使用一般的方法进行设置调用出来,会有很多的重复代码,如何将Dialog按照自己的思路设计呢,并让其可重用呢,下面我来介绍一下 ...