Question

我（最后）开始学习如何编写网页。我有这个小问题：

我正在为<div>添加一些图片（它是一个简单的幻灯片，效果很好），下面是另一个<div>内的段落（相关代码是下面）。但是，当我在浏览器中打开页面时，有时该段落出现在图像后面，但是一旦我刷新页面，它就显示在它的正确位置。

有时是困扰我的事情。如果总是出现在immages后面，我知道我做错了什么......但事实并非如此......所以，我错过了什么？

因此，具体问题是：如何确保第二个<div> 总是出现在第一个

之下？

代码：

的index.php

<head>
    <script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/scripts/script_main.js"></script>
</head>
<body>
    <div id="mainpanel">
        <div id="slideshow">
            <?php
                /*
                 This will simply add the images to the slideshow, and it works great
                 */
                $dir = "img/index";
                $files = scandir($dir);
                $i = 0;
                foreach($files as $img) {
                    if(substr($img, 0, 5) == "slide" && substr($img, -4) == ".jpg") {
                        $i++;
                        if($i == 1) {
                            echo "\n" . '<img alt="" class="active" src="' . $dir .'/' . $img . '" />';
                        } else {
                            echo "\n" . '<img alt="" src="' . $dir .'/' . $img . '" />';
                        }
                    }
                }
            ?>

        </div>
        <!-- 
             This is the place where the problem seems to be:
             This second div sometimes appears behind the first one.
          -->
        <div class="slideshow_text">
            <p>
                Suspendisse eu nibh ac ex interdum auctor. 
                Curabitur in nisi a libero tempor volutpat. 
                Praesent ornare tortor quis tempus aliquam.
            </p>
        </div>
    </div>
</body>

CSS / index.css

#mainpanel {
    min-height: 50em;
}

#mainpanel #slideshow {
    min-height: 430px;
    position: relative;
    height: auto;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

#mainpanel #slideshow img {
    display: block;
    margin-left: 2em;
    max-width: 80%;
    width: 480px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
}

#mainpanel #slideshow img.active {
    z-index: 10;
}

#mainpanel #slideshow img.last-active {
    z-index: 9;
}

#mainpanel .slideshow_text {
    display: block;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 2em;
    padding-right: 2em;
    font-family: serif;
    font-size: 0.9em;
    clear:both;
}

js / scripts / script_main.js （以防万一问题）

function slideSwitch() {
    var $active = $('#slideshow img.active');

    if($active.length === 0) {
        $active = $('#slideshow img:last');
    }
    var $next = $active.next().length ? $active.next() : $('#slideshow img:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
         .addClass('active')
         .animate({opacity: 1.0}, 1000, function() {
             $active.removeClass('active last-active'); 
         });
}

$(function() {
   setInterval('slideSwitch()', 5000) ;
});

$(document).ready(function() {
    var $slideshow_height = $('#slideshow img:first').height();
    $('#slideshow').css('min-height', $slideshow_height);
});

$(window).resize(function() {
    var $slideshow_height = $('#slideshow img:first').height();
    $('#slideshow').css('min-height', $slideshow_height);
});

Answer 1

美好的一天:)我建议你强制你的文本元素超过z-index的幻灯片元素，也许你应该尝试添加类似的东西：

#mainpanel .slideshow_text {
    z-index: 12;
}

文本出现在图像后面（不合需要），但在刷新时会出现在其位置

1 个答案: