打印

[求助] 模拟select表单元素时出现的z-index问题

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

1^# 大中小发表于 2008-9-25 11:12

我想模拟出select表单元素，但是出现了这样的问题，当第二行出现了同样的div.select时，上面的div.optionGroup就被下面的div.select遮住了，而且只有IE会出现这样的问题。

估计是div.select设置了position:relative时就自动赋以了z-index属性，并且html靠后的z-index高于html靠前的z-index。

现在难以找到合适的方案来解决这个问题，我不能在每个div.select上去设置z-index。

提示：您可以先修改部分代码再运行

从容不易

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

Kamov

海狸

高级会员

帖子: 277
体力: 555
威望: 0
当前: 湖北武汉
离线: 9 天

专长 前端制作,编辑,美编

2^# 大中小发表于 2008-9-25 11:23

删除.select的relative, .optionGroup从absolute换到relative呢?

我是冷场王......╮(￣⊿￣")╭

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

3^# 大中小发表于 2008-9-25 11:44

sorry，我这里div.select的relative是不能删除的，它还有其他的作用：定位其他浮动层的基线。

从容不易

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

4^# 大中小发表于 2008-9-25 11:47

非常感谢海狸提供的思路，非常感谢。
只是问题还是没得以解决。

从容不易

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

sliwen

新手上路

帖子: 22
体力: 43
威望: 0
当前: 北京海淀区
离线: 12 天

5^# 大中小发表于 2008-9-25 12:39

是想要这种效果吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<style>
    *
    {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    body
    {
        font-size: 12px;
        margin: 50px;
    }
    .select
    {
        position: relative;
        width: 100px;
        height: 20px;
        margin-top: 42px;
        background: #fc0;
    }
    .optionGroup
    {
        position: absolute;
        height: 50px;
        width: 98px;
        left: 0;
        top: 10px;
        background: #ffc;
        border: 1px solid #000;
        z-index: 1;
    }
</style>
<body>
    <div class="select">
        <div class="optionGroup">
        </div>
    </div>
    <div class="select">
        <div class="optionGroup">
        </div>
    </div>
    <div class="select">
        <div class="optionGroup">
        </div>
    </div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

6^# 大中小发表于 2008-9-25 14:15

呃，不是，我是要div.select不要挡住div.optionGroup。

从容不易

TOP

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

7^# 大中小发表于 2008-9-25 16:58

顶上去一下，求高手赐教。

从容不易

TOP

sliwen

新手上路

帖子: 22
体力: 43
威望: 0
当前: 北京海淀区
离线: 12 天

8^# 大中小发表于 2008-9-25 20:27

我做的div.select没有挡住div.optionGroup啊。

TOP

Elking

中级会员

帖子: 193
体力: 385
威望: 0
当前: 广东广州
离线: 1 天

9^# 大中小发表于 2008-9-26 02:24

想过。。。好像没办法解决 js 也不行。。。。z-index方面还真没其他方法替代的！！期待解决方法。。不过想说一声，我没见过同时获得焦点的select的。。你确定你是在模拟select??

TOP

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

10^# 大中小发表于 2008-9-27 10:54

引用:

原帖由 sliwen 于 2008-9-25 20:27 发表
我做的div.select没有挡住div.optionGroup啊。

那麻烦你发一下你的源码好么？

从容不易

TOP

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

11^# 大中小发表于 2008-9-27 10:55

引用:

原帖由 Elking 于 2008-9-26 02:24 发表
想过。。。好像没办法解决 js 也不行。。。。z-index方面还真没其他方法替代的！！期待解决方法。。不过想说一声，我没见过同时获得焦点的select的。。你确定你是在模拟select??

我确定我是在模拟select，抱歉我不懂JS，所以不太明白"我没见过同时获得焦点的select的"是什么意思。

从容不易

TOP

Elking

中级会员

帖子: 193
体力: 385
威望: 0
当前: 广东广州
离线: 1 天

12^# 大中小发表于 2008-9-28 01:02

额意思就是没见过能够同时打开多个select .....
一般的select 都是选择完就立刻恢复原貌。。。从而不会出现上面一个select打开导致要打开的下面一个select看不见的情况

TOP

14px [楼主]

秋末

高级会员

帖子: 311
体力: 664
威望: 0
当前: 湖南长沙

专长 网页设计,UI,前端制作

13^# 大中小发表于 2008-9-28 15:41

哦我这里的意思也是会恢复，我不是指下面的div.optionGroup挡住上面的div.optionGroup了，而是指div.optionGroup被下面的div.select挡住了。

从容不易

TOP

hgx127

新手上路

帖子: 14
体力: 27
威望: 3
当前: 北京丰台区
离线: 67 天

14^# 大中小发表于 2008-9-28 15:46

用relative这个问题是没有办法的，就像你说的那样，IE<=7（IE8已修正）下，相对定位对象自动被赋予z-index值，无法超越。
结合JS可以，但对于页面效率来说，不是很好的选择。

[ 本帖最后由 hgx127 于 2008-9-28 15:57 编辑 ]

TOP