关于层叠层的问题(div和css方面)

battier 发布于 2011/09/06 17:10
阅读 2K+
收藏 0
CSS

需求:由于本人需要做一个搜索引擎,用户输入关键字,系统自动在输入框下提示相关的数据,这个需求已经解决,但是现在碰到一个问题,就是用户输入关键字后,提示框会把下面的div撑下去,之前搜索栏和其他页面部分是在同一张页面开发的,效果正常,但是在项目中,由于搜索栏的共用性,故使用jsp的动态引入标签,如代码:

<div style="z-index:5;">
   <!-- 搜索栏start-->
   <jsp:include page="searchArea.jsp" flush="true"></jsp:include>
   <!-- 搜索栏end -->
</div>

<!-- 其他部分 -->

<div...>

....

</div>

但是这样,确发现,提示框将下面的div撑下去,这两个div的z-index属性均已设置,但是问题没有解决,求各位解决!

附:

1、需要的效果:

这个是正常的效果

2、实际效果

不正常的效果

 

加载中
0
小编辑
小编辑
弹出层设置 style="position:relative;"
battier
battier
@小编辑 : 我去问问红薯看看
小编辑
小编辑
@battier : 你到oschina首页,鼠标放在顶部“我的空间”上,看看那里的css是怎么写的
battier
battier
已经设置,但是没有效果
0
李三石
李三石
  position absolute ;
battier
battier
要结合z-index来用,使用absolute绝对对位不好控制
battier
battier
设置了,没有效果
0
scl33
scl33
01 <div style="z-index:5;position: absolute;">
02    <!-- 搜索栏start-->
03    <jsp:include page="searchArea.jsp" flush="true"></jsp:include>
04    <!-- 搜索栏end -->
05 </div>
div.left和top需要动态计算.
不行的话, 把DIV写到searchArea.jsp里试试, 如果有外网地址的话, 直接到你的页面上调试一下马上就知道问题了.
battier
battier
@scl33 : 我现在搞定了,其实不用像你那样复杂,我只在其外面又套了一层div,来控制其相对位置,最后搞定!
battier
battier
@scl33 : 这个也就是说,当用户改变窗口的时候我要写一个脚本,在这个脚本里面我要做的事情就是计算那个输入框的位置然后再设置下拉提示框的位置?
scl33
scl33
@battier : 这个就不是层的问题了, 定位的话有很多方法, 比如定时计算位置, 或者是在改变窗口大小/移动窗口的事件中就算, 等等..根据你的需要设计. 另外如果你用的是IE, 并且不打算跨浏览器的话, 可以直接将表达式写在css中, 他会自己动态计算的, 其他你都不用管了.例如"left:function(){return input.left-100;}
battier
battier
我把position:absolte;属性放进去了,可以,由于是绝对定位,我改变下窗口的大小,他的位置也就会产生变化,这样该怎么设置下呢?
返回顶部
顶部