刀巴郎吧 关注:178贴子:5,651

求教一个有关z-index属性的问题

只看楼主收藏回复

刀兄、各位吧友,大家好
有一段时间我没有过来了,这段时间在研究HTML,前不久转移到CSS的研究,崩溃的是刚开始研究就出现了问题,
我想请问一下大家,我们在使用z-index属性定义层的排列方式的时候应该怎么设置呢?我发现在百度空间里,我想通过设置z-index的值把一个flash模块放在导航栏后面,头部背景图片的前面,理论上应该是可以实现的,但是实际使用的时候发现没用,不管怎么设置那个flash模块还是在导航栏的前面,导致没办法使用导航栏的按钮(模块放在了导航栏的前面),
请问对于这个问题我这种解决的方法正确吗?或者说我这种办法根本没法实现,还有更好的办法可以做到呢?
麻烦刀兄或各位吧友提供帮助,谢谢大家。


1楼2009-04-24 23:15回复
    • 125.34.22.*
    z-index是作用于同一层面之间相关元素的,比如我家的地毯,餐桌,和桌上的台灯...
    但它不能左右不同层面元素关系,比如我家在一层,你家在二层,楼层的分配是HTML源文件写入顺序决定的,越是靠后写入,其优先级越高.
    请尝试!important提升tab优先级,以及绝对定位属性的统一应用.


    2楼2009-04-25 02:01
    回复
      HTML这一块我是知道的,只是我不知道有没有办法通过CSS调整,另外您说的定位属性统一应用是什么意思呢?


      3楼2009-04-25 13:06
      回复
        这又是个技术含量较高的问题呀。
        俺是用给模块定义z-index:-1;来解决你这问题的。俺理解是使模块回到了#main层面,正如楼上所说从二层回到了一层,而#header的默认层级又高于这模块,不知道对不对。
        实际#header可以遮挡这个模块,空间名称、简介和导航栏都在其之上。但是#header中不能放图片,会遮挡flash显示,图片要下放到body或#main上。如果flash中有链接,估计也会不起作用。


        4楼2009-04-25 19:49
        回复
          导航栏是在#header层面,而俺们无法使模块进入#header这个外部容器。所以,俺认为要使模块在导航栏之下、#header之上是不能的。


          5楼2009-04-25 20:13
          回复
            LS首先感谢您的帮忙,您的观点跟我是一样的,我也觉得不可能把模块放在导航栏之下,head层之上,但是貌似听说刀兄好像成功过,所以我想来请教一下。
            另外,您说得那种方法能不能稍微相信一点,说实话,CSS的基础我还不是很扎实。


            6楼2009-04-25 21:09
            回复
              说的不错,一个人的认知有局限,人多力量大。有时看似不能的后来也找到解决办法,也许刀兄能有好办法的。
              具体没什么了,就是
              #mod_模块编号{position: absolute;z-index:-1;}
              这个模块就在head层之下,main层之上了。


              7楼2009-04-26 14:30
              回复
                首先我先向您道个歉,6楼我有两个字打错了,后面一句话的“相信”应该改为“详细”,不好意思。
                另外,您说的那种方法我试过,可还是没用。


                IP属地:上海8楼2009-04-26 20:20
                回复
                  哦 对了 我跟“天使猫6688”是同一个人,这个号是我主要使用的,“天使猫6688”是专门用来研究技术的。


                  IP属地:上海9楼2009-04-26 20:21
                  回复
                    请加入CSS结尾部分后自行调试:
                    #main { /*变通替换原头部背景*/
                    width:1002px!important;padding:0px!important;margin:0px!important;
                    background:url(http://hiphotos.baidu.com/fize/pic/item/eff2f224ede048228644f947.jpg) no-repeat;
                    background-color:#3399CC
                    }
                    #header,#header div.lc,#header div.rc { /*提升tab菜单优先级并使背景透明*/
                    z-index:1;
                    background:transparent;
                    }
                    #mod_10017 object { /*移动flash模块内容至所需位置*/
                    position:absolute;left:100px;top:0px;
                    }
                    注意:
                    1.#mod_10017 是个向日葵时钟,修改为你空间所添加的flash模块ID即可.
                    2.我们无权修改HTML,因此这里只是一种变通的方式来实现你需要的效果.


                    10楼2009-04-27 13:21
                    回复
                      “没用”是说那种方法对你没用还是俺说的方法不起作用呀?
                      既是研究技术,应该严谨点。你这样一说,好像俺是信口瞎说了,俺也试过咋就有作用捏。
                      幸好俺不仅试过,先前还写过一个应用的模板,是把分享模块10886“金黄的田野”里的flash放到头部的:
                      http://hi.baidu.com/fangweng/blog/item/b98c982e7b7e2a3f1e308916.html#jinhua
                      你不妨装载上这个模板和10886模块试一试。。


                      11楼2009-04-27 13:39
                      回复
                        刀兄也在回复啊,,呵呵。殊途同归,仍是使#header层级在模块之上。


                        12楼2009-04-27 13:45
                        回复
                          -10 您的方法我基本上理解了,等会我去试试,但是我的CSS基础不是很好,如果有不理解的地方还希望您帮忙。
                          -11 您说话的方式有点令人感觉不舒服,我说的是您的方法我用过,没有效果,我没有别的意思,不知道您怎么会理解成我说你信口瞎说,我也强调过,我的CSS基础不好,您成功了就不允许我不成功吗?毕竟现在您是我的老师啊。


                          13楼2009-04-28 10:51
                          回复
                            您还是说俺的方法没有效果,没有说您应用这个方法没有成功。俺也强调过,说技术应该严谨点,所以给出了成功的例子。CSS有时错一个符号也会面目全非,但您没给出实例,就有了方法没有效果的结论。那不是俺在信口瞎说,应该说是您在信口瞎说了。不知俺这样的说话方式,是否能使您感觉舒服一点?
                            关于说话方式,俺会反省一下,自己感觉不舒服也要允许别人感觉不舒服。
                            俺不是您的老师,只是想帮您解决问题,以至于需要改变俺一贯的说话方式。不过年龄的差异是存在的,俺不再多说什么了。


                            14楼2009-04-28 14:18
                            回复
                              -14 我没反对您的说法,其实在这里回了我贴的人都是我的老师,包括您和刀兄,因为你们在教我知识,怎么就不是我的老师呢?
                              技术需要严谨我知道,一个活生生的例子,我在调试学校服务器的时候就是由于一时粗心设置错了一个应用程序池导致整个网站瘫痪。
                              另外,您没有必要改变您的说话方式,只是我想您是误解了我的意思,所以我才说看着不舒服,如果我说话有过激的地方,也请您谅解。
                              最后,感谢您一直帮助解决问题,谢谢。


                              15楼2009-04-28 16:12
                              回复