在做一个下拉框的动画效果中遇到了这个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. PHP 自学之路-----XML编程（Xpath技术,simpleXml技术）基础入门

    XPAth技术 XPath的设计的核心思想,可以通过xpath迅速简介的定位到你希望查找的节点.主要目的是描述节点相对其他节点的位置,可以取得所有符合条件的节点,成为[位置路径]. Xapth主要用来 ...

  2. Java面试题之三

    十一.谈谈final,finally,finalize的区别? 1.final:是修饰符,是一个关键字.修饰变量,如果是基本类型表示该变量的值不能修改:如果是引用类型表示该变量不能指向别的对象:修饰类 ...

  3. 1245 - Harmonic Number (II)（规律题）

    1245 - Harmonic Number (II)   PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 3 ...

  4. android蓝牙(二)——接收数据

    在蓝牙开发中,我们有这种一个需求:我们的androidclient要始终保持和蓝牙的连接,当蓝牙有数据返回的时候,androidclient就要及时的收取数据,当蓝牙没有数据返回的时候我们就要保持an ...

  5. Linux内核态抢占机制分析（转）

    Linux内核态抢占机制分析  http://blog.sina.com.cn/s/blog_502c8cc401012pxj.html 摘 要]本文首先介绍非抢占式内核(Non-Preemptive ...

  6. ssh "openssh-daemon is stopped"操作之伤+sftp访问“-bash: /dev/null: Permission denied”

    1.ssh "openssh-daemon is stopped"操作之伤 原来好好的 sshd服务突然发现  不能重新启动了: [root@bogon rules.d]# ser ...

  7. PHP学习笔记6-时间/日期

    时区/时间/日期 输出unix时间戳(从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数),用time() echo time();//unix时间戳 输出结果:143557475 ...

  8. python爬虫实战2百度贴吧爬html

    转自:http://blog.csdn.net/wxg694175346/article/details/8927832 import string, urllib2 #定义百度函数 def baid ...

  9. SQL 局域网远程备份

     局域网远程备份,还真有点问题 我用的是2003,发现sql和windows兼容不太好 . 如果我在windows下面映射远程目录,sql发现不了,找不到路径,备份不了,在sql下映射远程目录,win ...

  10. selenium中用js定位html上没有id，没有name的元素

    所测试的页面包含display:none的元素,所以考虑用js,在使用js的过程中,js要获得页面的对象,没有id,没有name ...... <a class="employer&q ...