Element verschwindet, wenn die Position auf absolut eingestellt ist?

einfaches Projekt, aber ein Anfänger bei der Programmierung, so zu kämpfen. Ich versuche, ein paar Knöpfe zu setzen, um einen Schieberegler zu erstellen, um Bilder zu ändern. Mein Problem ist, dass das div-Element, das die Schaltflächen enthält, verschwindet, wenn ich das position-Attribut im div, das die Schaltflächen enthält, auf absolut festlege.Element verschwindet, wenn die Position auf absolut eingestellt ist?

Also das ist ein Screenshot von meiner Seite mit Position relativ gesetzt:

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

und dies ist damit absolut gesetzt:

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

Und hier ist der Code

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; 
}

würde ich die Tasten wie auf dem Bild zu sein, darunter nicht, aber kann nicht verstehen, warum sie verschwinden. Jede Hilfe wird geschätzt.

Quelle

2017-02-27 Paul

Fügen Sie einen Offset hinzu, z. 'left: 0;' und 'top: 0;' Werte für das absolute Element. – Stickers

Hey @Paul, hast du Glück dabei? War es ein Fall von Z-Index, am Ende? –

war die Lösung, etwas Offset wie Pangloss vorgeschlagen hinzuzufügen. Ich bin mir nicht sicher, warum, obwohl – Paul

Versuchen Sie, den Z-Index der Schaltflächen auf einen Wert zu setzen, der größer als der des Bildes ist (5).

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

Quelle

2017-02-27 18:37:46

Was meinst du damit, @ata? –

Element verschwindet, wenn die Position auf absolut eingestellt ist?

Antwort

Verwandte Themen