Question

我必须将图像放在绝对位置。这个绝对位置我隐藏了溢出，所以它会自动高度，当然，我把这个绝对div放在相对位置。

但是当我将绝对位置改为相对位置时，图像才会显示出来。

这是我的代码：

<div style="position:relative; display:block; overflow:hidden; float:left;">
    <div style="position:absolute; overflow:hidden; display:block; top:0; left:0;">
        <img src="WEBbgB.jpg" />
    </div>
</div>

消息来源

        <ul id="slideHome">
            <li><img src="<?php base_url();?>assets/img/WEBbgA.jpg"/></li>
            <li><img src="<?php base_url();?>assets/img/WEBbgB.jpg"/></li>
        </ul>

CSS

#slideHome {
    list-style: outside none none;
    padding: 0px;
    position: relative;
    color: #FFF;
    font-size: 18px;
    float:left;
}


#slideHome li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background:green;
    overflow:hidden;
    margin: 0 auto;
}


#slideHome li img {
    width:100%;
}

JS

                        $.noConflict();
jQuery( document ).ready(function( $ ) {

    var triggers = $('ul#thumnalHome li');
    var images = $('ul#slideHome li');
    var lastElem = triggers.length-1;
    var target;

    triggers.first().addClass('active');
    images.hide().first().show();

    function sliderResponse(target) {
        images.fadeOut(300).eq(target).fadeIn(300);
        triggers.removeClass('active').eq(target).addClass('active');
    }

    triggers.click(function() {
        if ( !$(this).hasClass('active') ) {
            target = $(this).index();
            sliderResponse(target);
            resetTiming();
        }
    });

    $('.next').click(function() {
        target = $('ul#thumnalHome li.active').index();
        target === lastElem ? target = 0 : target = target+1;
        sliderResponse(target);
        resetTiming();
    });
    $('.prev').click(function() {
        target = $('ul#thumnalHome li.active').index();
        lastElem = triggers.length-1;
        target === 0 ? target = lastElem : target = target-1;
        sliderResponse(target);
        resetTiming();
    });

    function sliderTiming() {
        target = $('ul#thumnalHome li.active').index();
        target === lastElem ? target = 0 : target = target+1;
        sliderResponse(target);
    }

    var timingRun = setInterval(function() { sliderTiming(); },5000);
    function resetTiming() {
        clearInterval(timingRun);
        timingRun = setInterval(function() { sliderTiming(); },1000);
    }

}）;

为什么我将这个位置设为绝对是因为这是出于滑块的目的。

请知道。

Answer 1

申请

position:fixed;进入您的图片

 <img style="position:fixed;" src="WEBbgB.jpg" />

这可以使其可见

<div style=" position:relative; display:block; overflow:hidden;  float:left;">
    <div style="  position:absolute; overflow:hidden; display:block; top:0; left:0;">
        <img style="position:fixed;" src="WEBbgB.jpg" />
    </div>
</div>

Answer 2

因

而无法显示

overflow:hidden;

而不是因为你的职位

图像不会显示在绝对位置

2 个答案: