-
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
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)
随机文章:
IE下中英文下划线对齐问题 2009-07-17CSS裸奔节 2009-04-09一种静止的CSS进度条的实现 2008-10-29博客加了一个顶部导航条 2008-09-14最近 2008-09-04
收藏到:Del.icio.us






评论
另外,再建议你给图片加 margin 和 border(粗一点)~
nicole_dao@163.com
谢谢~~
建议你写 CSS 的文章前面介绍下每个属性..
还有,图和文,不好区分..