位置：絕對使圖像佔據整個頁面

我得到了一個滑塊橫幅，它完美的工作，但我需要把一個位置：絕對把一個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); 
}

來源

2015-04-23 anuseranother

在absolute定位，爲height和width百分比將反映的大小offsetParent，你的情況可能是<body>。這意味着例如width: 95%;是頁面寬度的95％。

您將需要以像素爲單位定義大小或給出某個祖先節點，例如， div.all，相對定位，使這個進入offsetParent，使大小綁定到替代<body>

div.all { 
    position: relative; 
}

來源

2015-04-23 00:12:59

致謝！我也試過這個，但是當我添加它時，幻燈片不顯示！而當我把大小放在px中時，它仍然不會改變...而且我不知道有其他方法可以將div放在一起！ – anuseranother

此外，它只是「打破」在幻燈片一邊的coulmn ...我使用骨架框架，它似乎打破所有的列方案 – anuseranother

此外，圖像可能不會顯示，因爲與所有從div流中取出的內容可能會崩潰到0高度。將高度規則添加到該選擇器，以將div.all設置爲希望圖像佔用95％的高度。 – wunth

位置：絕對使圖像佔據整個頁面

回答

相關問題