图像未显示在绝对位置答案

【问题标题】：Image doesn't show up in the absolute position图像未显示在绝对位置
【发布时间】：2015-06-04 06:29:00
【问题描述】：

我必须将图像放在绝对位置。这个绝对位置我把overflow隐藏起来，让它自动变高，当然我把这个绝对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%;
}

                        $.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);
    }

});

我之所以把这个位置设为绝对是因为这是为了滑块的目的。

请有任何想法。

【问题讨论】：

请创建小提琴，它必须工作。
而右 0 和底部 0 仍然没有成功。宽度可能是 100%，但我不想设置高度（或者可能是自动）
如果我在父级上设置高度，它将使图像高度跟随父级的高度。我想动态地制作图像的高度。
@iyal，能否请您粘贴代码，或者在 jsfiddle 中创建一个示例。这将很好地了解您的问题...
请看我的更新，拜托......提前致谢。

标签： html css

【解决方案1】：

它不会显示，因为

overflow:hidden;

不是因为你的职位

【讨论】：

【解决方案2】：

申请

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>

【讨论】：