王传业的博客

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://wchuanye.blogbus.com/logs/34141781.html

开心网(http://www.kaixin.com)的状态更改的时候可以添加表情，而且状态最多可以写140个字，如果状态比较长的话，当输入状态的时候，表情会被下面的遮挡（现在已经不会被遮了）。

--------------------------------------分割线-------------------------------------

产品要求当点击输入框时，表情那一行不会把下面的挤开，当然也不能被下面的遮住。当前的结构是这样的：

如上图，B、C是A的子级，我们定义A的position属性为relative，并定义有效的高宽值，C的position:absolute，再通过调整C的left、top定位，这样C就是相对于A的绝对定位。如此就满足了第一个要求，不会把下面的内容挤开。但会被遮挡。此时设置z-index是无效的，这种定位方式下，C的z-index属性仅在A容器内有效。

--------------------------------------分割线-------------------------------------

解决办法：

如上图，我们让D容器position:relative，让C相对于D绝对定位，这样C的z-index属性就在整个D容器内有效了，同时，要去掉C的left和top属性，改用margin来调整其位置，当然也不能写rihgt和bottom，因为E的高度取决于状态的字数，是会变的，假如用left top的话，其值是相对于D容器的边缘的，这样当E高度变了的时候，C就不会紧贴在B上，用margin就没问题了，因为margin是本身的外边距，只要设置C的margin-top为0，它就会一直贴着B了。OK，搞定！

具体代码可以查看开心网的相关页面(http://home.kaixin.com)