Slider后面的内容正在覆盖Slider。为什么？

Question

我正在工作的滑块，这是完美的工作，但问题是，网页内容后，滑块是覆盖在滑块的2-3幻灯片。我不想固定滑块的高度，但也想显示后滑块内容后，每张幻灯片的滑块。代码在下面共享。

<script type="text/javascript">
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
    if(!d.getElementById || !d.createElement)return;
    imgs = d.getElementById("gallery").getElementsByTagName("li");
    for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    imgs[0].style.display = "block";
    imgs[0].xOpacity = .99;
    setTimeout(so_xfade,1000);
}
function so_xfade() {
    cOpacity = imgs[current].xOpacity;
    nIndex = imgs[current+1]?current+1:0;
    nOpacity = imgs[nIndex].xOpacity;
    cOpacity-=.05; 
    nOpacity+=.05;
    imgs[nIndex].style.display = "block";
    imgs[current].xOpacity = cOpacity;
    imgs[nIndex].xOpacity = nOpacity;
    setOpacity(imgs[current]); 
    setOpacity(imgs[nIndex]);
    if(cOpacity<=0) {
        imgs[current].style.display = "none";
        current = nIndex;
        setTimeout(so_xfade,3000);
    } else {
        setTimeout(so_xfade,50);
    }
    function setOpacity(obj) {
        if(obj.xOpacity>.99) {
            obj.xOpacity = .99;
            return;
        }
        obj.style.opacity = obj.xOpacity;
        obj.style.MozOpacity = obj.xOpacity;
        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
    }
}
</script>
<style type="text/css">
#slider {max-height:700px;background:url(https://lh6.googleusercontent.com/-LLFEz-EyGbk/UyV9SbGPuhI/AAAAAAAAMgY/JNqf8X11dbk/s220/slider-loader.gif) #2e2e2e no-repeat 50% 50%;}
#gallery {padding:0;position:relative;margin:0 auto;max-width:1920px;}
#gallery li {list-style-type:none;width:100%;display:none;position:absolute;top:0;left:0;}
.gallery_img img {max-width:100%;}
.gallery_text {width:100%;margin:0 auto;text-align:center;position:absolute;top:-20%;left:0%;}
.gallery_text h2 {padding:0;line-height:70px;font-size:50px;font-weight:inherit;color:#fff;}
.gallery_text p {margin:20px 0;line-height:24px;font-size:20px;color:#ffee66;}
.gallery_text a {background:#77aa00;display:inline-block;padding:20px 70px;font-size:18px;font-weight:700;text-transform:uppercase;color:#fff;text-decoration:none;}
.gallery_text a:hover {background:#fff;color:#000;}
</style>
This Is The DIV Or Text Before The Slider.
<div class='clear'/>
<div id='slider'>
<ul id='gallery'>
<li style='position:relative!important;'>
<div class='gallery_img'><img alt='Google' src='https://lh4.googleusercontent.com/-Nh50j1-Bqws/UyV9Pv_wd3I/AAAAAAAAMf8/nsYUnwm35Gs/s1920/slide_1.jpg' title='Google'/></div>
<div class='gallery_text'><h2>Google</h2><p>Google is an American multinational corporation specializing in Internet-related services and products.</p><a href='http://www.google.com'>Open Google</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Bing' src='https://lh4.googleusercontent.com/-eGrPYj9dz1c/UyV9QgDIh5I/AAAAAAAAMgM/mlcDdyufQJs/s1920/slide_2.jpg' title='Bing'/></div>
<div class='gallery_text'><h2>Bing</h2><p>Bing is a search engine that brings together the best of search and people in your social networks to help you spend less time searching and more time doing.</p><a href='http://www.bing.com'>Open Bing</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Yahoo' src='https://lh6.googleusercontent.com/-L_s8vxgupPY/UyV9RKToZeI/AAAAAAAAMgQ/TWs-wy7lbrk/s1920/slide_3.jpg' title='Yahoo'/></div>
<div class='gallery_text'><h2>Yahoo</h2><p>Yahoo! Inc. is an American multinational Internet corporation headquartered in Sunnyvale, California.</p><a href='http://www.yahoo.com'>Open Yahoo</a></div>
</li>
</ul>
</div>
<div class='clear'/>
This Is The DIV Or Text After The Slider.

您还可以看到带有错误的活动FIDDLE ..。

Answer 1

我想我找到问题了。您正在尝试动态地调整<li>元素的CSS display属性，在block和none之间交替进行。但我不认为这是正确的方法。所有的列表项目元素都应该被显示，并且在任何时候都有display:block;。可以通过将第一个<li>设置为position:static; (意味着它将嵌入到页面的图形流中)来实现所需的定位，所有剩余的<li>元素都应该设置为position:absolute; (这意味着它们将在位置上“折叠”到其父容器，从而导致它们紧靠在第一个<li>之上)。为了确保在任何时候只有一个<li>是可见的，它就足以将其他的不透明度降低到零。

因此，我对您的代码做了以下更改：

1. 将第一个<li>从<li style='position:relative!important;'>更改为<li style="position:static;">。
2. 将display规则的#gallery li属性更改为block。
3. 注释掉处理.style.display节点的<li>属性的3行JS。
4. 将setOpacity()函数的定义从so_xfade()函数中移出，以便将其存储在window.setOpacity中，从而可以从所有作用域(更改#5所必需的)访问它。
5. 将行for(i=0;i<imgs.length;i++) setOpacity(imgs[i]);添加到行imgs[0].xOpacity = .99;之后的so_init()中，以确保正确初始化所有<li>元素的不透明性。

我以前没有使用过jsfiddle，所以我不确定我是否做对了，但是我单击了顶部菜单栏中的"Update“按钮，它将我放到http://jsfiddle.net/yyathnom/2/中，所以我想您可以使用它来查看我的更改。如果你想用的话请告诉我。

编辑:对不起，我没有意识到每一张幻灯片都需要链接功能。对于链接功能，当前幻灯片不仅需要可见，而且需要在堆栈的前面。这可以通过z索引来实现。

一个复杂的问题是，z索引不适用于静态定位的元素，但是可以通过将位置:静态属性更改为位置:第一个列表项的相对项(这实际上是原来的！)来克服这一问题。相对定位的元素仍在流中，它们可以被移动并有其z索引集。

另一个复杂的问题是，z索引与不透明度之间的交互是奇怪的；最后的“计算”不透明度似乎同时考虑了不透明度CSS样式和z索引。因此，一幅50%不透明度的图像在另一张50%的图像上，如果你交换这两张图像的z索引，就会产生不同的外观，甚至留下50%的不透明度。最初，当这两幅图像的透明度大约相等(50%)时，我试图交换z-索引，但视觉反射是不可取的，所以我最终只在0的不透明度处更改了z-索引。

因此，作了以下额外的修改：

1. 添加了两个全局概念常数，ZINDEX_UNDERNEATH (1)和ZINDEX_CURRENTSLIDE (100)。较大的z-索引意味着“前面的更多”，而较小的意味着“更远的后退”在堆叠上下文中。
2. 为除第一个<li>之外的所有<li>添加了初始化imgs[0].style.zIndex = ZINDEX_CURRENTSLIDE;，为第一个<li>添加了imgs[0].style.zIndex = ZINDEX_CURRENTSLIDE;。
3. 在重新分配current之前，添加了以下两行以将新的当前幻灯片设置为可见的z-索引： imgscurrent.style.zIndex = ZINDEX_UNDERNEATH；imgsnIndex.style.zIndex = ZINDEX_CURRENTSLIDE；

结果：http://jsfiddle.net/yyathnom/3/

编辑：提供了关于原始问题的更多细节，这是由于三个<li>元素中有两个有position:absolute，这意味着它们不是在流中，虽然第一个<li>有position:relative，这意味着它是在流(但相对可移动的)，但是代码经常使用display:none禁用它。任何不是在流中的元素实际上都没有“质量”，这意味着它不会把下面的元素推到它下面，而是让它们“塌陷”到如果它在流中的话它所处的位置。因此，当第一个<li>被设置为display:none (也就是在显示其他两个<li>时)时，没有一个流元素来保持图像下方的幻灯片图像后面的文本，因此它折叠到图像的流位置。