Question

我有一个滑块横幅，它工作得很好，但我需要放置一个位置：绝对将一个div放在另一个上面，当我这样做时，它只是忽略我为img设计的宽度和高度，并制作img占据了整个屏幕。有人能帮助我吗？

HTML：

<div class="row">
<div class="eight columns all">
    <img src="img/slide_1.jpg" class="hide" id="img-slide">
    <img src="img/slide_2.jpg" class="hide" id="img-slide">
    <img src="img/slide_3.jpg" class="hide" id="img-slide">
    <!--<p>>></p> -->
</div>

CSS：

.all img{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;
    position:absolute;
}

    .all img.show{
        opacity:1;
        left: 0px;
        -webkit-transition:all 1.0s ease-in-out;
        -moz-transition:all 1.0s ease-in-out;
        -o-transition:all 1.0s ease-in-out;
        transition:all 1.0s ease-in-out;

    }

    .all img.hide{
        left: -1000px;
        opacity: 0;
        -webkit-transition:all 1.0s ease-in-out;
        -moz-transition:all 1.0s ease-in-out;
        -o-transition:all 1.0s ease-in-out;
        transition:all 1.0s ease-in-out;
    }

和JS：

function loop() {
    var listPict = document.getElementsByClassName('all')[0].children;

    var old = listPict.length - 1;

    var current = 0;

    listPict[current].setAttribute('class', 'show');

    listPict[old].setAttribute('class', 'hide');

    old = current;
    current++;

    if (current === listPict.length)
        current = 0;

    setTimeout(loop, 3000);
}

Answer 1

在absolute定位中，height和width的百分比将反映 offsetParent 的大小，在您的情况下可能是{{1} }}。这意味着例如<body> 页面宽度的95％。

您需要以像素为单位定义大小或者给出一些祖先节点，例如： width: 95%;，相对定位使其成为 offsetParent ，以便将大小绑定到div.all

<body>

位置：绝对使图像占据整个页面

1 个答案: