當位置設置爲絕對時元素消失？

簡單的項目，但在編程初學者，所以很掙扎。我試圖設置幾個按鈕來創建一個滑塊來更改圖片。我的問題是，當我在包含按鈕的div中將position屬性設置爲absolute時，包含按鈕的div元素消失。當位置設置爲絕對時元素消失？

所以這是我的網頁與位置的截圖設置爲相對：

.buttons { 
      cursor: pointer; 
      position: relative; 
}

，這是將其設置爲絕對的：

.buttons { 
      cursor: pointer; 
      position: absolute; 
}

這裏是代碼

HTML

<!DOCTYPE html> 
<html lang="en-US"> 

    <head> 

     <meta charset="UTF-8"> 

     <title>Photography</title> 

     <link rel="stylesheet" type="text/css" href="styles.css"> 
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script> 
     <script type="text/javascript" src="JavaScript2b.js"></script> 
     <script type="text/javascript" src="JavaScript2.js"></script> 


    </head> 

    <body> 

    <div id="header"> 
    </div> 

     <div id="container"> 

     <div id="imagewrap"> 
      <img src="Images/01Folder/Image.jpg" height="500px" id="front" /> 

      <div id="previous" class="buttons" onclick="change(-1);"> 
      </div> 

      <div id="next" class="buttons" onclick="change(1);"> 
      </div> 
     </div> 

     </div> 


    <div id="footer"> 
    </div> 

    </body> 

    <script type="text/javascript" src="JavaScript2.js"></script> 

</html>

CSS

html, body { 
      margin: 0px; 
      padding: 0px; 
      height: 100vh; 
    } 

#header { 
    position: relative; 
    height: 10%; 
    width: 100%; 
    background-color: lightgray; 
} 

#footer { 
    position: relative; 
    height: 10%; 
    width: 100%; 
    background-color: lightgray; 
    display: block; 
} 

#container { 
    height: 80%; 
    width: 100vw; 
    background-color: white; 
    min-height: 580px; 
    text-align: center; 
} 

#imagewrap{ 
    position: relative; 
    border: 1px solid #818181; 
    overflow: hidden; 
    z-index: 5; 
    display: inline-block; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.buttons { 
      cursor: pointer; 
      position: relative; 
} 

#previous { 
      background-image: url(Images/carremoins.png); 
      background-repeat: no-repeat; 
      background-position: center center; 
      width: 20px; 
      height: 20px; 
     } 

#next { 
      background-image: url(Images/carreplus.png); 
      background-repeat: no-repeat; 
      width: 20px; 
      height: 20px; 
      background-position: center center; 
}

我想的按鈕在圖片上，不能低於它，但無法理解他們爲什麼消失。任何幫助讚賞。

來源

2017-02-27 Paul

添加一些偏移，例如， 'left：0;'和'top：0;'絕對元素的值。 – Stickers

嘿@保羅，這有什麼好運？最後是z-index的情況嗎？ –

的解決方案是增加一些像Pangloss建議的偏移量。我不太確定爲什麼 – Paul

嘗試將按鈕上的z-index設置爲大於圖像（5）的值。

.buttons { 
    cursor: pointer; 
    position: relative; 
    z-index: 10; 
}

來源

2017-02-27 18:37:46

這是什麼意思，@ata？ –

當位置設置爲絕對時元素消失？

回答

相關問題