絶対位置に設定すると要素が消えますか？

シンプルなプロジェクトですが、プログラミングの初心者であり、とても苦労しています。私は写真を変更するスライダを作成するためにいくつかのボタンを設定しようとしています。私の問題は、ボタンを含む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-インデックスを画像（5）よりも大きな値に設定してみてください。

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

出典

2017-02-27 18:37:46

これは、どういう意味ですか？ –

絶対位置に設定すると要素が消えますか？

答えて

関連する問題