在做一个下拉框的动画效果中遇到了这个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. Poj 2299 Ultra-QuickSort(归并排序)

    题目链接:http://poj.org/problem?id=2299 思路分析:序列的逆序数即为交换次数,所以求出该序列的逆序数即可.根据分治法思想,序列分为两个大小相等的两部分, 分别求子序列的逆 ...

  2. C++一些注意点之异常处理

    几篇文章:(1)http://blog.csdn.net/daheiantian/article/details/6530318 (2)http://blog.chinaunix.net/uid-21 ...

  3. Hibernate MySQL 数据库 使用别名 报 Column * Not Found

    使用Hibernate 查询MySQL数据表的时候报 Column Not Found ,原因是MySQL的驱动不支持别名, 解决方案如下,在连接参数中加上 useOldAliasMetadataBe ...

  4. 我的Python成长之路---第三天---Python基础（9）---2016年1月16日（雾霾）

    一.集合 set和dict类似,也是一组key的集合,但不存储value.由于key不能重复,所以,在set中,没有重复的key. 集合和我们数学中集合的概念是一样的,也有交集,并集,差集,对称差集等 ...

  5. 2014 HDU多校弟九场I题 不会DP也能水出来的简单DP题

    听了ZWK大大的思路,就立马1A了 思路是这样的: 算最小GPA的时候,首先每个科目分配到69分(不足的话直接输出GPA 2),然后FOR循环下来使REMAIN POINT减少,每个科目的上限加到10 ...

  6. 1.unix网络编程基础知识

    接触网络编程一年多了,最近在系统的学习vnp两本书,对基础知识做一些总结,希望理解的更透彻清晰,希望能有更多的沉淀. 1.套接口地址 针对IPv4和IPv6地址族,分别定义了两种类型的套接口地址:so ...

  7. mvc导航配置

    <?xml version="1.0" encoding="utf-8" ?><Configuration> <Navigatio ...

  8. 关于PsCreateSystemThread函数

    研究了1天这个...MSDN说的不是很清楚NTSTATUS PsCreateSystemThread(  _Out_      PHANDLE ThreadHandle,  _In_       UL ...

  9. 转：javascript面向对象编程

    作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学 ...

  10. 基于visual Studio2013解决算法导论之030二叉查找树

     题目 二叉查找树 解决代码及点评 // 12二叉查找树.cpp : 定义控制台应用程序的入口点. // // 3 - 10二叉搜索树查找.cpp : 定义控制台应用程序的入口点. // #in ...